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前 言 


惠普 在 2015 年 11 月 进行 了 战略 拆 分 ， 正 式 拆 分 成 两 家 独立 企业 ， 其 中 新 成 立 “Hewlett 
Packard Enterprise (简称 为 HPE)”， 专 注 于 企业 级 业务 ， 核 心 业务 就 是 领先 的 软件 资产 ， 由 
惠普 领先 的 企业 技术 基础 架构 业务 、 软 件 业务 和 服务 业务 组 成 另 一 家 为 HP Inc， 由 惠普 领 
先 的 个 人 系统 业务 和 打印 业务 组 成 。 

2016 年 2 月 1 日 起 ，HPE 正式 发 布 了 新 的 品牌 名 称 及 品牌 LOGO。HPE 中 文 品牌 名 称 
“ 慧 与 ”应 运 而 生 。“ 慧 ”象征 智慧 ， 和 “ 惠 ” 同 样 的 发 音 联 结 着 我 们 与 过 去 的 传承 与 发 展 。 
“与 ”寓意 合作 ， 表 达 我 们 与 员工 、 合 作 伙伴 、 客 户 间 携手 共 赢 的 关系 。 

慧 与 国际 软件 人 才 及 产业 基地 开展 实 训 业 务 三 年 来 ， 在 全 国 几 十 所 高 校 设 立 了 共 建 专 
业 ， 并 与 全 国 几 千家 企业 建立 了 人 才 合 作 关系 ， 培 养 了 近 万 名 软件 人 才 。 其 中 软件 开发 方向 
开设 了 JavaEE、 大 数据 、.NET、Android 等 专业 ， 处 于 行业 领先 水 平 。 

近年 来 , 随 着 互联 网 的 兴起 以 及 传统 企业 与 互联 网 的 结合 , 前 端 Web 系统 的 复杂 性 不 断 
增加 ， 出 现 了 许多 专职 的 前 端 职 位 ， 比 如 高 级 前 端 开 发 工程 师 、 前 端 架 构 师 。Web 网 站 是 一 
个 从 前 到 后 的 系统 工程 ， 从 公司 的 角度 看 ， 实 现 这 个 系统 需要 的 技术 资源 越 来 越 多 ， 包 括 系 
统 设计 、JavaScript、 后 端 技术 、UX、 数 据 库 。2010 年 之 后 ， 后 端 技术 更 多 迁移 到 云 及 大 数 
据 上 ， 而 其 他 技术 大 多 涉及 前 端 开发 ， 以 至 于 在 2010 年 和 2014 年 底 出 现 了 对 HIML5 工程 
师 需 求 的 爆发 式 增长 。 

Web 前 端 方面 的 工作 由 原来 的 重视 Web 设计 , 发 展 到 Web 设计 、Web 开发 、Web 交互 、 
Web 性 能 并 重 ， 这 无 疑 对 Web 前 端 行 业 的 从 业者 提出 了 巨大 挑战 。 现 在 网 上 有 许多 介绍 前 
端 开发 知识 的 文章 ， 但 是 前 端 从 业者 发 现 找到 适合 自己 的 知识 却 不 容易 。 本 书 从 全 局 角度 ， 
尽量 覆盖 一 名 前 端 开 发 工程 师 所 需 的 技能 ， 构 建 企 业 所 需 的 技能 体系 。 

全 书 分 四 大 部 分 ， 内 容 涉 及 HIML5、CSS3、MongoDB、JavaScript、jQuery 和 jQuery 
Mobile。 

其 中 每 部 分 包含 多 个 章节 。 本 书 是 一 本 涵盖 Web 前 端 开发 基础 知识 的 教程 , 不 仅 包括 从 
事 Web 前 端 开发 需要 掌握 的 理论 知识 和 技术 详解 ,还 包括 企业 项 目的 实战 , 分 析 前 端 技术 的 
使 用 场景 及 其 在 项 目 中 的 作用 。 


本 书 内 容 

全 书 共 分 为 10 章 ， 主 要 内 容 如 下 : 

第 1 章 : 介绍 HIMLS 的 发 展 历史 、HTMLS 的 新 特性 及 其 背后 的 设计 理念 ， 详 细 介 绍 
HTMLS5 的 新 元 素 , 包括 HIMLS 新 的 结构 元 素 、 分 组 元 素 和 语义 元 素 、 多 媒体 元 素 和 HIML5 
表单 。 

第 2 章 : 介绍 CSS 的 新 特性 、BootStrap 的 作用 及 其 使 用 方法 。 
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第 3 章 : 介绍 JavaScript 基础 内 容 以 及 使 用 JavaScript 创建 交互 式 网 页 ， 从 JavaScript 的 
基本 语句 到 对 象 和 函数 的 高 级 用 法 ， 都 列举 了 实例 ， 还 介绍 了 浏览 器 的 事件 处 理 方法 。 

第 4 章 : JavaScript 图 形 编程 是 HIMLS 最 吸引 人 的 特性 之 一 ， 本章 由 浅 入 深 地 介绍 了 画 
布 的 各 种 概念 和 使 用 方法 ， 还 穿插 了 多 个 实例 ， 帮 助 读者 理解 画布 的 具体 开发 流程 。 

第 5 章 : 介绍 MongoDB 的 基本 概念 、 增 删改 查 基本 操作 ， 使 读者 能 够 马上 入 门 和 体验 
MongoDB 的 好 处 。 

第 6 章 : 介绍 jQuery 的 核心 内 容 ， 使 用 jQuery 能 用 最 少 的 代码 实现 最 多 的 功能 ， 还 介 
绍 如 何 遍 历 HTML 文档 、 处 理事 件 ， 并 对 浏览 器 DOM 模型 进行 了 补充 介绍 。 

第 7 章 : 介绍 Ajax 异步 通信 原理 ， 并 根据 这 个 原理 分 析 jQuery 是 如 何 实现 这 些 异 步 通 
信 的 。 

第 8 章 : 介绍 流行 的 jQuery 插件 ， 讨 论 jQuery 的 扩展 能 力 以 及 如 何 寻 找 插件 。 

第 9 章 : 介绍 Ajax 的 具体 应 用 ， 使 用 jQuery Mobile 开发 移动 端 应 用 。 

第 10 章 : 介绍 jQuery 最 常见 的 动画 效果 ， 结 合 使 用 jQuery 的 DOM 操作 、CSS 操作 、 
动画 特效 和 制作 出 绚丽 的 页 面 。 
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2014 年 10 月 28 日 ， 万 维 网 联盟 (W3C) 宣 布 ， 历 经 8 年 的 努力 ，HTMLS 标准 规范 最 终 
制定 完成 ， 并 已 公开 发 布 。 此 前 的 几 年 时 间 里 ， 已 经 有 很 多 开发 者 陆续 使 用 了 HTMLS 的 部 
分 技术 ，Firefox、Google Chrome、Opera、Safari 4+、Intemet Explorer 9+ 都 已 支持 HIMLS。 

HTML5 是 近 十 年 来 Web 开发 标准 最 巨大 的 飞跃 。 和 以 前 的 版 本 不 同 ，HTMLS5 并 非 仅 
用 来 表示 Web 内 容 ， 它 的 新 使 命 是 将 Web 带 入 一 个 成 熟 的 应 用 平台 。 在 HIML5 平台 上 ， 
视频 、 音 频 、 图 像 、 动 画 以 及 与 计算 机 的 交互 都 被 标准 化 。HTMLS5 在 这 个 时 间 定 稿 ， 不 早 
不 晚 ， 正 是 硬件 性 能 更 强 、 手 机 OS 迭代 速度 下 降 的 时 期 。 随 着 HTMLS5 标准 的 定稿 ， 一 切 
纷争 将 告 一 段落 。 现在， 属于 HTMLS5 的 时 代 到 来 了 。 


本 章 内 容 : 

e@ 掌握 HTML5 的 文档 结构 

@ 掌握 HTMLS 新 增 的 语义 化 元 素 
@ 使 用 HTML5 中 的 多 媒体 元 素 

e@ 掌握 HTMLS 表单 元 素 


1.1 HTMLS 介绍 


1.1.1 HTML5 发 展 史 


互联 网 发 展 到 2005 年 前 后 ， 开 始 出 现 了 一 个 变化 ， 就 是 宽带 互联 。 随 着 宽带 的 普及 和 
计算 机 性 能 的 增强 ， 人 们 不 再 满足 于 单纯 地 通过 互联 网 看 新 闻 、 收 发 邮件 ， 消 耗 更 高 带宽 的 
娱乐 产品 开始 出 现 , 就 是 流 视频 和 网 页 游戏 。 HTML 标准 没有 把 握 住 产 业 的 变化 而 及 时 演进 ， 
浏览 器 产品 也 未 升级 ， 这 块 新 需求 被 浏览 器 插件 满足 了 ， 那 就 是 Flash。 这 个 部 署 在 亿 万 浏览 
器 里 的 商业 插件 癸 然 成 为 事实 标准 。 但 乔布斯 力 挺 HIML5， 他 坚持 在 iOS 上 不 兼容 Flash。 为 
了 能 够 支持 新 的 Web 应 用 ， 同 时 克服 现 有 的 缺点 ，HIML 迫切 需要 添加 新 功能 、 制 定 新 规范 。 

一 小 组 人 为 了 弥补 HTML 中 最 薄弱 的 环节 ， 开 始 专门 针对 Web 应 用 开发 新 功能 ， 他 们 
创立 了 HTML5 规范 。 就 是 在 那个 时 候 开 创 了 Web 的 第 二 个 时 代 ，Web 2.0 这 个 新 词 也 被 发 
明 出 来 ， 这 主要 表现 在 旧 的 静态 网 站 逐渐 让 位 于 需要 更 多 特性 的 动态 网 站 和 社交 网 站 。2006 
年 ，W3C 又 重新 介入 HIML， 并 于 2008 年 发 布 了 HIML5 的 工作 草案 。 到 了 2010 年 ， 因 为 
HIML5 能 解决 非常 实际 的 问题 ， 所 以 在 规范 还 未 定稿 的 情况 下 ， 各 大 浏览 器 厂家 就 已 经 按 
捧 不 住 了 ， 开 始 对 旗下 产品 进行 升级 以 支持 HTMLS5 的 新 功能 。 这 样 ， 得 益 于 浏览 器 的 实验 
性 反馈 ，HTMLS5 规范 得 到 了 持续 完善 ，HTML5 以 这 种 方式 迅速 融入 对 Web 平台 的 实质 性 
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改进 中 。 虽 然 HTMLS5 已 经 定稿 ,但 HTMLS5 仍 在 完善 中 ,并 计划 于 2016 年 底 前 发 布 HTML5.1 
推荐 标准 。HTMLS5 正式 版 的 网 址 是 : 
http://www.w3.org/TR/2014/REC-htm15-20141028/ 


HIMLS 可 以 是 存在 于 手机 桌面 的 图 标 ， 也 可 以 来 自 超级 App( 如 微 信 朋 友 圈 )， 以 及 搜索 
引擎 、 应 用 市 场 、 广 告 联盟 ， 为 桌面 和 移动 平台 带 来 无 颖 衔接 的 丰富 内 容 。HTML5 像 血管 
一 样 连接 一 个 个 独立 的 APP 器 官 并 将 血液 输送 到 不 同 的 APP 中 。 

HTMLS5 的 发 展 , 有 用 户 的 需求 在 推动 , 也 有 技术 开发 者 的 需求 在 推动 。 学习 Objective-C 
和 Java 比较 费劲 ， 既 然 会 网 页 开发 ， 为 何不 试 试 HTML5 呢 ? 它 支持 传统 的 桌面 平台 ， 又 支 
持 移动 平台 ， 包 括 iOS、Android、BlackBery、Windows Phone 等 。 这 种 跨 平台 的 特性 可 以 
让 所 有 平台 共用 一 个 UI 代码 库 ， 节 省 几 倍 的 开发 时 间 。 


1.1.2 谁 在 开发 HTML5 


上 面 我 们 提 到 了 一 些 开发 HTML5 的 组 织 ， 下 面 进行 详细 介绍 : 

e WHATWG: 由 来 自 Apple、Mozilla、Google、Opera 等 浏览 器 厂商 的 人 组 成 ， 成 立 
于 2004 年 。WHATWG 开发 HIML 和 Web 应 用 API， 同 时 为 各 浏览 器 厂商 以 及 其 
他 有 意向 的 组 织 提供 开放 式 合作 。 

e W3C: W3C 下 辖 的 HIML 工作 组 目前 负责 发 布 HIMLS5 规范 。 

e IETF(Internet Engineering Task Force,， 互联 网 工程 任务 组 ): 这 个 任务 组 下 辖 HITP 
等 负责 Intemet 协议 的 团队 。HTMLS5 定义 的 一 种 新 API (WebSocket APD 依 赖 于 新 的 
WebSocket 协议 ，IETF 工作 组 正在 开发 这 个 协议 。 


HTML5 的 主要 新 功能 


语义 化 标记 及 新 的 特殊 内 容 元 素 ， 比 如 article、footer、header、nav、section 
新 的 表单 控件 

用 于 绘画 的 canvas 元 素 

用 于 媒介 回放 的 video 和 audio 元 素 

对 本 地 离线 存储 的 更 好 支持 

地 理 位 置 

拖 忠 上 传 

多 线程 支持 











a 
i 
CD 


1.2 HTMLS 的 优势 


1.2.1 解决 跨 浏览 器 问题 
一 份 互联 网 上 对 开发 者 的 问卷 调查 表明 : 浏览 器 兼容 性 成 了 最 大 的 问题 ， 开 发 者 对 于 浏 
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览 器 扩展 规范 能 够 统一 、 各 大 厂商 浏览 器 兼容 性 能 够 提升 的 愿望 最 为 迫切 。 在 某 个 Web 浏览 
器 上 可 以 正常 运行 的 HTML/CSS/JavaScript 等 Web 程序 ， 在 另 一 个 Web 浏览 器 上 就 运行 不 
正常 了 。 如 果 用 一 句 话 来 描述 这 个 问题 的 原因 ， 可 以 说 是 “规范 不 统一 ”。 规 范 未 实现 标准 
化 ， 是 造成 这 个 问题 的 主要 原因 。 
作为 新 生 儿 的 HIMLS 在 各 种 Web 浏览 器 上 的 兼容 性 也 一 直 是 Web 开发 人 员 的 心头 大 
患 。HTMLS5 的 使 命 是 详细 分 析 各 Web 浏览 器 所 具有 的 功能 ， 然 后 以 此 为 基础 ， 要 求 这 些 浏 
览 器 的 所 有 内 部 功能 都 要 符合 一 个 通用 标准 。 比 如 ，Google 分 析 了 上 百 万 个 页 面 ， 从 中 分 析 
出 了 Div 标签 的 通用 ID 名称， 发现 其 重复 量 很 大 ， 很 多 开发 人 员 使 用 id=header 来 标记 页 眉 
区 域 ， 那 为 何不 直接 添加 一 个 <header> 标 签 呢 ? 

如 今 各 大 浏览 器 厂商 都 支持 HTMLS5 标准 ， 可 以 访问 https://html5test.com/ 查 看 自己 的 浏 
览 器 对 HIMLS 的 支持 情况 。 那 么 以 HIMLS 标准 为 基础 来 书写 的 程序 在 各 浏览 器 上 都 能 正 
常 运行 的 可 能 性 就 大 大 提高 了 , 这 对 于 Web 开发 者 和 Web 设计 者 都 是 一 件 令 人 可 喜 的 事情 。 
而 且 ， 今 后 开发 者 开发 出 来 的 Web 功能 只 要 符合 通用 标准 ，Web 浏览 器 也 都 是 很 愿意 封装 
该 功能 的 。 


1.2.2 用 户 优先 的 原则 


“用 户 即 上 帝 ” 的 宗旨 也 体现 在 HIMLS 中 , 用 户 怎么 使 用 的 , 就 怎么 设计 规范 。 HTML5 
规范 是 基于 用 户 优先 准则 编写 的 ， 这 意味 着 在 遇 到 无 法 解决 的 冲突 时 ， 规 范 会 把 用 户 放 到 第 
-位 ， 其 次 是 页 面 作者 ， 再 次 是 实现 者 (或 浏览 器 )， 接 着 是 规范 制定 者 (W3C/WHATWG), 最 
后 才 考 虑 理论 的 纯粹 性 。 因 此 ，HTMLS5 的 绝 大 部 分 是 实用 的 ， 只 是 有 些 情况 下 还 不 够 完美 。 
例如 ， 下 面 的 代码 在 HTMLS5 中 是 有 效 的 : 





<div id=wrapper> 

<img SRC=logo.png aLt=1ogo> 

我 们 不 推荐 这 么 使 用 HTML5, HTMLS 的 适应 性 保证 了 用 户 体验 , 因为 一 旦 由 于 开发 人 
员 的 原因 造成 页 面 错 误 而 导致 不 能 正常 显示 ， 那 么 受 折磨 的 肯定 是 最 终 用 户 。 

<video> 

<source src="movie.mp4"> 

<source src="movie.ogv"> 

<object data="movie.swf"> 

<a href="movie.mp4">download</a> 

</object> 

</video> 

上 面 的 代码 包含 了 4 个 不 同 的 层次 : 

e 如果 浏览 器 支持 video 元 素 ， 也 支持 MP4， 那 么 没什么 好 说 的 ， 用 第 一 个 视频 。 

e 如 果 浏 览 器 支持 video 元 素 ， 支 持 ogv， 那 么 用 第 二 个 视频 。 

e 如 果 浏 览 器 不 支持 video 元 素 ， 那 么 就 要 试 试 Flash 影 片 了 。 

e 浏览 器 不 支持 video 元 素 ， 也 不 支持 Flash， 还 给 出 了 下 载 链接 。 

HTML5 进行 了 优雅 的 降级 ， 保 证 了 最 终 用 户 的 体验 。 
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1.2.3 ”化 繁 为 简 的 优势 


HTML5 减少 了 对 插件 的 依赖 HTMLS5 要 的 就 是 简单 ， 避 免 不 必 要 的 复杂 性 ， 化 繁 为 简 
无 异 于 提供 了 更 好 的 服务 。HTML5 做 了 以 下 这 些 改进 : 

e 以 浏览 器 原生 能 力 替 代 复 杂 的 JavaScript 代码 

e 新 的 简化 的 doctype 

e 新 的 简化 的 字符 集 声明 

e 简单 而 强大 的 HTML5 API 

随后 我 们 将 详细 讲解 这 些 改进 。 为 了 实现 所 有 的 这 些 简 化 操作 ，HTMLS5 规范 需要 包括 
一 系列 定义 明确 的 行为 ， 任 何 歧义 和 含糊 都 可 能 延缓 这 一 目标 的 实现 。HTML5 规范 已 经 变 
得 非常 大 而 且 要 求 精确 。 





1.3 HTMLS 基本 语法 


本 书 以 人 人 微 博 网 站 为 案例 , 在 已 有 的 基于 HTML4 的 Web 网 页 的 基础 上 , 修改 为 基于 
HIMLS 的 Web 网 页 。 在 学 习 项 目 案例 之 前 ， 我 们 应 该 掌握 HTML4 和 CSS 的 知识 ， 熟 悉 
Tomcat 的 部 署 和 启动 。 项 目 需求 如 下 : 

人 人 微 博 是 一 种 通过 关注 机 制 分 享 简短 实时 信息 的 广播 式 的 社交 网 络 平台 ， 功 能 模块 包 
括 与 用 户 相关 的 登录 、 注 册 、 个 人 资料 维护 功能 ， 与 关系 链 相 关 的 关注 功能 ， 与 微 博 内 容 相 
关 的 发 布 微 博 、 浏 览 微 博 功能 。 

e 用 户 登 录 : 用 户 可 以 使 用 手机 号 或 邮箱 登录 微 博 ， 如 图 1-1 所 示 。 






人 人 都 有 微 博 ， 不 是 每 一 个 微 博 都 有 价值 了 
微 博 有 很 多 种 ， 不 是 每 一 种 微 博 都 有 态度 下 次 自动 各 好 。 忘记 声 码 ? 
EL 
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图 1-1 微 博 首页 
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e 用 户 注册 : 用 户 可 以 注册 账号 并 设置 昵称 和 性 别 ， 如 图 1-2 所 示 。 


8080/rrwb/regist.html 
外 


ES 己 有 向 情 账 号 ?可 以 直 
得: 


电子 邮箱 /手机 与 码 


it * 并 至 类 
5 
昵称 
SE 
性 别 甸 男 日 女 * 忘记 了 至 码 ? 
《向 博 服务 使 用 协议 》 技 到 96 位 月 友 
反 有 287 各 检 兰 


开通 
执 到 6 条 感光 乔 的 医 是 





图 1-2 用户 注册 


e 用 户主 页 用 户 在 个 人 主页 上 可 以 查看 自己 关注 的 好 友 ， 自 己 和 好 友 发 布 的 微 博 ， 
并 且 可 以 实时 发 布 微 博 ， 如 图 1-3 所 示 。 


还 可 以 输入 14 字 





Ss FEN 


可 能 感光 知 的 人 暴 一 接 ]】 他 部 ] 
手 培 


RR 
® 文艺 青年 站 地 名 和 去 
I nt 加 关注 











全 部 相互 关注 悄悄 关注 特别 关 主 月 学 同事 


wedens 


2015-1-28 1735:13 


webtans 
大 家 好 ! 


图 1-3 用 户主 页 
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e 用 户 个 人 资料 维护 : 用 户 可 以 完善 和 修改 自己 的 地 址 、 头 像 、 生 日 等 个 人 信息 ， 如 
图 1-4 所 示 。 





localhost80 ngeinfo html? id- 





语录 名 : webtans@eamole com 


明和 祥 : webfans 
通才 文件 ] Deser py 
全 :| 上 续 





站 : | 河北 
者 男 
日 : PotS/oVo 


es 
图 1-4 微 博 个 人 信息 














下 面 我 们 来 运行 案例 代码 : 

(1) 请 打开 本 书 源 代码 RrwbHtml4 rar。 

(2) 将 其 解压 到 Tomcat 目录 的 Webapps 目录 下 ， 这 里 使 用 Tomcat 默认 的 8080 端口 。 

(3) 运行 Tomcat 目录 的 bin 目录 下 的 startup.bat。 

(4) 在 浏览 器 的 地 址 栏 中 输入 http://localhost:8080/rrwb/ 并 回 车 ， 就 能 看 到 项 目 案例 的 主 
页 本 


1.3.1 新 的 DOCTYPE 


还 记得 这 段 HTML4 的 doctype 吗 ? 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.0rg/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.0org/TR/html4/loose.dtd"> 


现在 ，HTMLS5 提供 了 一 个 很 好 的 而 且 便于 记忆 的 doctype。 

<!DOCTYPE html> 

简化 了 吧 ， 就 这 么 多 。 我 们 只 需要 使 用 它 ， 就 可 以 告诉 浏览 器 应 处 于 标准 兼容 模式 下 。 
浏览 器 会 根据 DOCTYPE 识别 应 该 使 用 哪 种 显示 模式 ， 以 及 使 用 什么 规则 来 验证 页 面 。 即 使 
某 个 浏览 器 尚未 实现 HIML5， 页 面 仍然 可 以 继续 工作 。 
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1.3.2 ”新 的 字符 编码 
在 HTML4 中 ， 使 用 meta 元 素 的 形式 指定 文件 中 的 字符 编码 ， 如 下 所 示 : 
<meta http-equiv="content-type" content="text/html; charset=utf-8"> 
但 是 ， 在 HIML5 中 ， 它 会 像 doctype 一 样 非常 简洁 : 
<meta charset="utf-8"> 
请 记 住 ， 我 们 的 页 面 需 要 字符 编码 和 doctype 声明 。 
1.3.3 引用 链接 和 样式 表 
因为 链接 和 样式 表 将 成 为 我 们 所 看 到 或 创建 的 常见 元 素 ， 所 以 这 里 快速 介绍 一 下 如 何 将 


它们 包含 于 网 页 中 ， 这 很 重要 。 本 书 稍 后 对 CSS 和 JavaScript 有 更 多 的 介绍 。 
在 HTML4 中 ， 使 用 link 给 网 页 添加 样式 ， 如 下 所 示 : 


<link rel="stylesheet" type="text/css" href="styles/changeinfo.css"/> 
HTMLS5 对 此 进行 了 简化 ， 如 下 所 示 : 
<link rel="stylesheet" href="styles/changeinfo.css"/> 


HTMLS 向 页 面 添加 脚本 则 更 加 简单 。 在 页 面 中 添加 一 个 <scrip 忆 元素 ， 然 后 添加 src 属 


性 ， 指 向 需要 使 用 的 JavaScript 文件 的 位 置 : 


<script src="scripts/changeinfo.js"></script> 
而 HTML4 添加 脚本 则 需要 指定 type 属性 : 


<script language="javascript" type="text/javascript" src="scripts/ 
changeinfo.js"></script> 


script 元 素 新 增 了 defer 属性 和 async 属性 ， 正 常情 况 下 浏览 器 会 按 页 面 顺序 加 载 js 文件 
和 演 染 ，defer 属性 表示 当前 js 文件 会 在 页 面 泻 染 后 加 载 。async 属性 表示 异步 (并 行 ) 加 载 和 
执行 当前 js 文件 。 例 如 : 


<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>HTML5</title> 
<!-- 大 小 为 1.88 KB --> 
<script defer onload="alert ('loadedA')" src="http://cdnjs.cloudflare.com 
/ajax/libs/html5shiv/3.6/html5shiv.min.js" ></script> 
<!-- 大 小 为 250 KB --> 
<script async onload="alert ('loaded B')" src="http://apps.bdimg.com 
/libs/jQuery/2.1.1/jQuery.js" ></script> 
</head> 
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<body> 
Hello 
</body> 
</html> 
运行 的 结果 为 :先进 行 页 面 显示 ， 后 显示 弹出 框 ， 经 过 测试 弹出 “loaded A” 和 “loaded 
B” 的 顺序 不 确定 。 这 两 个 属性 都 能 够 实现 以 非 阻塞 的 方式 加 载 脚本 ， 区 别 在 于 执行 的 时 
机 不 同 。 


1.3.4 HTML5 标签 的 向 后 兼容 性 


如 何 让 下 6 一 IE8 浏览 器 支持 HIMLS 元 素 呢 ? 使 用 一 小 段 代 码 就 行 ， 将 它 引 入 页 面 的 
head 部 分 的 后 面 ， 看 下 面 的 例子 : 

<!--[iE lt IE9]> 

<script 

src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6/html5shiv.min.js"> 

</script> 

<![endif]--> 

HTMLS5 shiv 的 主要 作用 就 是 让 正 正常 识别 HTMLS5 标签 ， 就 目前 而 言 ， 只 要 知道 需要 
引入 它 即 可 。 如 果 不 这 么 做 ， 在 正 8 和 更 早期 版 本 中 就 会 得 到 不 可 预测 的 结果 。 我 们 可 以 查 
阅 Paul Irish 的 文章 “The History of the HTML5 Shiv” 来 了 解 这 段 简短 而 重要 的 脚本 的 历史 ， 
网 址 是 : 


http://paulirish.com/2011/the-history-of-the-html5-shiv/ 


此 外 还 有 构建 在 HTMLS5 shiv 之 上 的 另 一 个 库 ， 它 被 称 为 Modemizr。 为 保证 向 后 兼容 
性 , 它 的 核心 部 分 包含 了 HIMLS shiv。 书 中 的 案例 会 使 用 相对 较 简 单 的 HIMLS Shiv 来 确保 
对 于 IE8 和 更 早 版 本 的 兼容 性 。 

现在 我 们 来 修改 人 人 微 博 网 站 的 页 面 的 doctype、 字 符 编 码 、 链 接 和 样式 表 并 加 入 HTML5 
shiv， 修 改 后 所 有 的 页 面 都 有 类 似 于 下 面 的 代码 : 

<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8" /> 


<title> 人 人 微 博 </title> 
<link rel="stylesheet" href="styles/index.css" /> 





<script src="scripts/index.js"></script> 

<script src="scripts/move.js"></script> 

<t==11£ Tt TE9]2 

<script 
src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6/html5shiv.min.js"> 
</script> 

<![endif]--> 

</head> 

</html> 
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1.3.5 ”<base> 元 素 


为 页 面 上 的 所 有 链接 规定 默认 基准 URL。 浏 览 器 随后 将 不 再 使 用 当前 文档 的 URL， 而 
是 使 用 通过 base 元 素 指定 的 URL 作为 基准 。 例 如 : 


<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>HTML5</title> 
<base href="https://www.baidu.com/" target=" blank"/> 
</head> 
<body> 
<a href="img/bdlogo.png">logo</a> 
</body> 
</html> 


当 点 击 logo 链接 时 ， 则 会 打开 网 址 https://www.baidu.com/img/bdlogo.png。 
完成 了 这 部 分 的 学 习 后 , 我 们 已 经 准备 好 了 继续 学 习 页 面 结构 , 下 面 让 我 们 学 习 HIMLS 
的 文档 结构 和 内 容 分 组 。 


1.4 HTMLS 内 容 分 组 


在 HTML5 之 前 ,大 部 分 网 页 制作 方法 都 是 利用 class 或 id 属性 来 命名 网 站 的 页 面 结 构 。 
比如 : 


<body> 
<div id="header"> 
<div id="logo"></div> 
<div id="navigation"> 
<ul> 
<1i><a href="#"> 链 接 </a></1i> 
</ul> 
</div> 
</div> 
<div id="content"></div> 
<div id="footer"></div> 
</body> 


而 HTMLS5 追加 了 几 个 与 页 眉 、 页 脚 、 内 容 区 块 等 文档 结构 相关 联 的 结构 元 素 ， 对 于 微 
博 网 站 来 说 ， 导 航 菜单 、 微 博 正 文 、 微 博 的 评论 等 每 一 个 部 分 都 可 称 为 内 容 区 块 ， 新 增 的 结 
构 元 素 可 以 对 内 容 进 行 更 精确 的 分 组 。 运 用 HTML5 可 以 这 样 写 : 

<body> 


<header> 
<div id="logo"></div> 
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<nav> 
<ul> 
<1i><a href="#"> 链 接 </a></1i> 
</ul> 
</nav> 
</header> 
<div id="content"></div> 
<footer></footer> 
</body> 


HTML5 的 新 结构 元 素 使 得 网 页 结构 更 加 清晰 、 规 范 ， 使 HTML 更 具 语义 化 ， 语 义 化 是 
指 用 合理 的 HIML 标记 及 其 特有 的 属性 来 格式 化 文档 内 容 。 通俗 地 讲 , 语义 化 就 是 对 数据 和 
信息 进行 处 理 ， 使 得 机 器 可 以 理解 。 这 样 做 的 好 处 有 : 
。 手持 移动 设备 的 无 障碍 阅读 。 手 持 移动 设备 (如 PDA、 智 能 手机 等 ) 可 能 对 CSS 的 解 
析 能 力 较 弱 ， 这 时 可 能 就 需要 更 语义 化 的 标签 来 体现 页 面 的 易 读 性 。 
。 盲人 等 一 些 障碍 人 士 可 以 更 好 地 阅读 。 屏 幕 阅读 器 对 不 同 标签 所 发 出 的 声音 是 不 同 
的 ， 使 用 更 语义 化 的 标签 能 传达 不 同 信息 的 重要 性 。 
。 ”搜索 引擎 的 友好 收录 。 虽 然 各 大 搜索 引擎 的 排名 规则 不 断 地 变化 ， 但 规则 里 的 正则 
始终 是 要 匹配 标签 的 ， 如 果 能 用 更 语义 化 的 标签 ， 搜 索引 擎 就 能 够 根据 标签 的 使 用 
来 确定 各 关键 字 的 权重 。 


1.4.1 <header> 元 素 














<header> 元 素 可 以 用 作 网 站 的 “ 题 头 ”区 域 ， 也 可 以 作为 对 其 他 内 容 (如 <article> 元 素 ) 的 
简要 介绍 。 在 稍 后 介绍 的 <article> 元 素 中 可 以 拥有 它 自 己 的 题 头 ， 用 来 包含 有 关 作者 、 发 布 
日 期 以 及 文章 标题 等 信息 。 

1.4.2 ”<footer> 元 素 

和 <header> 元 素 一 样 ， 它 也 可 以 视 情 况 在 同一 个 页 面 上 多 次 出 现 。 例 如 微 博 网 站 的 页 脚 
可 以 用 它 ， 我 们 在 <footer> 中 加 入 团队 简介 、 联 系 方式 、 版 权 信息 等 。 

1.4.3 ”<address> 元 素 

<address> 元 素 不 只 是 用 来 呈现 电子 邮箱 或 真实 地 址 ， 还 用 于 标记 <article> 元 素 或 整个 文 
档 的 联络 信息 。 还 可 用 来 展示 与 文档 相关 的 联系 人 的 所 有 联系 信息 。 

1.4.4 <article> 元 素 

<article> 元 素 是 一 个 独立 的 内 容 块 ， 它 既 可 以 独立 存在 ， 也 可 以 被 重用 。 可 以 想象 一 些 
常见 的 例子 ， 比 如 一 篇 微 博 、 一 个 论坛 帖子 、 一 段 时 尚 评论 、 一 段 新 闻 稿 或 一 个 交互 式 小 工 
具 。 最 基本 的 经 验 是 ， 如 果 一 段 内 容 可 以 被 “聚合 ”， 或 者 可 以 独立 于 网 站 其 余 环境 进行 分 
享 ， 就 应 该 使 用 <article> 元 素 进行 标记 。 比 如 一 篇 新 闻 : 


<article> 
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<hl>Safari 5 released</h1> 

<p>7 Jun 2010. Just after the announcement of the new iPhone 4 at WWDC, 

Apple announced the release of Safari 5 for Windows and Mac...... </p> 
</article> 


1.4.5 ”<nav> 元 素 


<nav> 元 素 最 常用 的 用 途 是 作为 网 站 的 主导 航 。 很 多 情况 下 ， 开 发 者 都 使 用 无 序列 表 编 
写 导航 ， 它 用 于 链接 到 网 站 内 的 其 他 页 面 ， 或 是 链接 到 一 个 页 面 的 其 他 部 分 。HIMLS 的 编 
写 方式 为 : 


<nav class="header Llist"> 

<ul> 

<1i><a href="#"> 首 页 </a></1i> 

<1i><a href="guangchang.html" target=" blank"> 广 场 </a></1i> 
<1i><a href="#"> 微 群 </a></1i> 

<1i><a href="#"> 应 用 </a></1i> 

<1i><a href="#"> 游 戏 </a></1i> 

</ul> 

</nav> 


1.4.6 ”<section> 元 素 


<section> 元 素 定义 文档 中 的 节 ( 区 段 )， 比 如 章节 、 页 眉 、 页 脚 或 文档 中 的 其 他 部 分 。 
<section> 元 素 的 使 用 方式 和 <div> 元 素 的 使 用 方式 相似 。 不 过 ， 与 <div> 元 素 不 一 样 的 是 ， 
<section> 元 素 具 有 语义 含义 ， 它 是 一 组 相关 内 容 的 组 合 。<section> 元 素 中 可 以 包含 <article> 
元 素 , <article> 元 素 也 可 以 包含 <section> 元 素 , <article> 元 素 是 一 个 特殊 的 section, 它 比 section 
具有 更 明确 的 语义 ， 它 代表 一 个 独立 的 、 完 整 的 相关 内 容 块 。 一 般 来 说 ，<article> 元 素 会 有 
标题 部 分 (通常 包含 在 <header> 内 )， 有 时 也 会 包含 <footer> 元 素 。 


<article> 
<hgroup> 
<h1> 苹 果 </h1> 
<h2> 品 尝 美味 的 苹果 !</h2> 
</hgroup> 
<p> 蕴 果 的 品种 有 很 多 。</p> 
<section> 
<h1> 红 苹果 、 芳 香 </h1> 
<p> 这 种 红 苹果 在 超市 里 非常 常见 。</P> 
</section> 
<section> 
<h1> 绿 苹果 、 较 酸 </h1> 
<p> 绿 苹果 可 以 用 来 制作 果汁 。</p> 
</section> 

</article> 
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1.4.7 ” <hr> 元 素 


<hr> 元 素 用 于 在 页 面 中 创建 一 条 横 跨 页 面 的 横 线 ， 分 隔 页 面 中 不 适 于 使 用 新 标题 的 独立 
区 域 。HTMLS5 中 不 再 支持 align、noshade、size 以 及 width 属性 。 


1.4.8 ”<blockquote> 元 素 


<blockquote> 与 </blockquote> 之 间 的 所 有 文本 都 会 从 常规 文本 中 分 离 出 来 ,经 常会 在 左右 
两 边 进行 缩 进 (增加 外 边 距 )， 而 且 有 时 会 使 用 斜体 ， 还 可 以 使 用 cite 属性 指明 引用 内 容 的 来 
源 的 HTTP 地 址 。 


1.4.9 <aside> 元 素 


<aside> 元 素 用 来 表示 当前 页 面 或 文章 的 附属 信息 部 分 , 它 可 以 包含 与 当前 页 面 或 主要 内 
容 相 关 的 引用 、 侧 边栏 、 广 告 、 导 航 条 ， 以 及 其 他 类 似 的 有 别 于 主要 内 容 的 部 分 。<aside> 元 
素 主 要 有 以 下 两 种 使 用 方法 : 

e 被 包含 在 <article> 元 素 中 作为 主要 内 容 的 附属 信息 部 分 ， 其 中 的 内 容 可 以 是 与 当前 文 

章 有 关 的 相关 资料 、 名 词 解 释 等 。 
e 在 <article> 元 素 之 外 使 用 作为 页 面 或 站 点 全 局 的 附属 信息 部 分 。 最 典型 的 是 侧 边栏 ， 
其 中 的 内 容 可 以 是 友情 链接 、 博 客 中 的 其 他 文章 列表 、 广 告 单元 等 。 


1.4.10 ”<hgroup> 元 素 


<hgroup> 元 素 用 于 组 织 具 有 一 些 风 辑 联 系 的 多 级 标题 ， 例 如 子 标题 、 标 题 信息 、 可 选 标 
题 等 内 容 ， 可 以 被 包含 在 <section>、<article> 等 元 素 中 。 


1.4.11 ”<a> 元 素 


HTMLS5 中 的 <a> 元 素 可 以 包含 段落 、 列 表 、 表 格 等 块 级 元 素 。 下 面 的 例子 演示 的 整个 广 
告 块 被 包含 在 <a> 元 素 中 : 


<aside class="advertising"> 
<h1> 广 告 </h1> 
<a href=""> 
<section> 
<h1> 岁 末 清 仓 ， 省 时 、 省 力 !</h1> 
<p> 热 卖 !</p> 
<p> 只 要 9.9 元 </p> 
</section> 
</a> 
<a href=""> 
<section> 
<h1> 团 购 年 货 </h1> 
<p>1 元 起 </p> 
<p>Go!</p> 
</section> 
</a> 
</aside> 
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1.4.12 HTML5 的 文档 大 纲 


就 像 Word 中 的 大 纲 视图 ，HTML 也 有 自己 的 大 纲 。 比 如 ， 新 闻 网 站 中 文章 的 结构 与 报 
纸 上 文章 的 结构 类 似 。 每 一 篇 文章 包含 标题 、 文 本 段落 以 及 一 些 图 片 (有 时 可 能 以 视频 代替 图 
片 )。 相 同 点 非常 明显 ， 而 唯一 的 不 同 就 是 ， 在 报纸 上 可 以 在 一 个 版 面 上 容纳 多 篇 故事 ， 而 在 
网 页 上 每 篇 故事 则 倾向 于 独占 一 个 页 面 。HTML4 的 大 纲 是 由 <h1>、<h2>、<h3>、<h4>、<h5>、 
<h6> 完 成 的 ， 由 于 整个 HTML 文档 是 一 个 独立 的 元 素 ， 因 此 应 该 只 拥有 一 个 总 体 摘要 ， 在 
商 要 树 的 顶端 是 唯一 的 <h1> 元 素 。 要 了 解 HTMLS 的 文档 大 纲 ， 需 要 知道 主体 结构 元 素 和 非 
主体 结构 元 素 的 区 别 以 及 HTMLS5 的 新 大 纲 算法 。 

1. 结构 元 素 和 非 结 构 元 素 的 区 别 


上 面 学 习 了 HTMLS 的 新 元 素 ， 新 增 的 主体 结构 元 素 包括 <article> 元 素 、<section> 元 素 、 
<nav> 元 素 及 <aside> 元 素 。 主 体 结构 元 素 能 够 表示 内 容 区 块 ， 例 如 对 于 书籍 来 说 ， 章 、 节 都 
可 以 称 为 内 容 区 块 。 对 于 微 博 网 站 来 说 ， 导 航 菜单 、 微 博 正 文 、 微 博 的 评论 等 每 一 个 部 分 都 
可 称 为 内 容 区 块 。 新 增 的 非 主体 结构 元 素 包括 <header> 元 素 、<hgroup> 元 素 、<footer> 元 素 及 
<address> 元 素 ， 非 主体 结构 元 素 表 示 罗 辑 结构 或 附加 信息 。 

2. HTML5 的 新 大 纲 算法 


由 于 加 入 新 的 内 容 分 组 元 素 ，HTMLS5 的 文档 结构 比 大 量 使 用 <div> 元 素 的 HIML4 的 文 
档 结构 清晰 、 明 确 了 很 多 。 在 微 博 网 站 中 ， 会 有 多 篇 包含 于 同一 个 HTML 文档 中 的 独立 文 
章 。 这些 文章 都 可 以 拥有 自己 的 逻辑 摘要 , 并 独立 于 页 面 的 其 他 部 分 。 基于 这 个 原因 , HTML5 
引入 了 一 种 能 力 ， 即 可 以 在 同一 页 面 中 加 入 多 个 <h1> 元 素 ， 并 将 其 用 于 页 面 中 不 同 的 分 区 元 
素 内 。 大 纲 算法 允许 用 户 代 理 从 一 个 Web 页 面 生成 一 个 信息 结构 目录 , 让 用 户 对 页 面 有 一 个 
快速 概览 。 类 似 书籍 、 PDF、 帮 助 文档 等 ， 都 有 一 个 清晰 的 目录 结构 ， 用 户 能 方便 地 定位 所 
需 内 容 。 一 个 结构 良好 的 大 纲 ， 不 仅 是 对 搜索 引擎 的 优化 ， 更 是 为 借助 于 屏幕 阅读 器 浏览 网 
页 的 失明 人 士 或 弱视 力 用 户 提供 了 巨大 的 帮助 。 如 果 想 要 查看 这 段 代 码 的 大 纲 ， 可 以 试 试 
Geoffrey Sneddon 做 的 大 纲 工具 : 


























https://gsnedders.html5.org/outliner/ 


我 们 来 验证 如 下 HIMLS 代码 : 
<div> 
<h6> 名 著 推 荐 </h6> 
<section> 
<h1> 国 内 名 著 </h1> 
<article> 
<h1> 红 楼 梦 </h1> 
<p> 红 楼 梦 讲 的 是 . .</p> 
</article> 
<article> 
<h3> 边 城 </h3> 
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<p> 边 城 讲 的 是 . .</p> 
</article> 
</section> 
<section> 
<h5> 国 外 名 著 </h5> 
<article> 
<h6> 战 争 与 和 平 </h6> 
<p> 战 争 与 和 平 讲 的 是 . .</p> 
</article> 
<article> 
<h1> 红 与 黑 </h1> 
<p> 红 与 黑 讲 的 是 . .</p> 
</article> 
</section> 
<div> 


生成 的 文档 大 纲 如 图 1-5 所 示 。 
1. 名 著 推荐 


2. 红 与 黑 
图 1.5 生成 的 文档 大 网 





为 什么 hl 到 h6 的 层级 在 这 里 没有 表现 出 来 ? 原因 是 此 时 大 纲 是 由 节点 元 素 生成 的 ， 而 
非 标题 元 素 。HTMLS5 的 新 标签 section、article、aside、nav 会 生成 显 性 节点 (explicit sections)， 
每 个 显 性 节点 内 部 又 有 自己 的 标题 结构 。 这 也 就 是 为 什么 HTMLS5 允许 多 个 hl 存在 的 原因 
不 过 ， 在 全 部 浏览 器 、 屏 幕 阅读 器 都 完美 支持 HTML5 之 前 ， 建 议 还 是 同时 考虑 标题 结构 ， 
优雅 降级 。 上 面 的 结构 可 以 改 成 这 样 : 


<div> 
<h1> 名 著 推 荐 </h1> 
<section> 
<h2> 国 内 名 著 </h2> 
<article> 
<h3> 红 楼 梦 </h3> 
<p> 红 楼 梦 讲 的 是 . .</p> 
</article> 
<article> 
<h3> 边 城 </h3> 
<p> 边 城 讲 的 是 . .</p> 
</article> 
</section> 


<section> 
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<h2> 国 外 名 著 </h2> 

<article> 
<h3> 战 争 与 和 平 </h3> 
<p> 战 争 与 和 平 讲 的 是 . .</p> 

</article> 

<article> 
<h3> 红 与 黑 </h3> 
<p> 红 与 黑 讲 的 是 . .</p> 

</article> 

</section> 
<div> 


我 们 可 以 得 出 结论 : 显 性 节点 (section 等 ) 可 以 包含 隐 性 节点 hl 一 h6)， 反 之 则 不 可 以 。 有 
时 会 出 现 未 命名 节点 (antitled sections)， 比 如 : 


<nav class="header Llist"> 
<ul> 
<1i><a href="#"> 首 页 </a></1i> 
<li><a href="guangchang.html" target=" blank"> 广 场 </a></1i> 
<1i><a href="#"> 微 群 </a></1i> 
<1i><a href="#"> 应 用 </a></1i> 
<1i><a href="#"> 游 戏 </a></1i> 
</ul> 
</nav> 
<footer> 
<h3> 我 是 footer 可 是 为 什么 我 成 为 了 文档 标题 啊 </h3> 


</footer> 


生成 的 文档 大 纲 如 图 1-6 所 示 。 





图 1-6 生成 的 文档 大 纲 


因为 nav 里 并 没有 包含 任何 标题 元 素 ，<nav> 元 素 会 生成 一 个 untitled section， 这 不 是 错 
误 ， 也 不 会 被 认为 是 不 好 的 HTMLS 结构 。 但 是 section、article 还 是 建议 给 予 适 当 的 标题 。 
为 什么 <footer> 元 素 的 标题 成 了 文档 标题 呢 ? 因为 文档 标题 是 文档 中 第 一 个 非 节 点 元 素 里 的 
第 一 个 标题 元 素 。 

1) 实现 微 博 首页 

掌握 了 HTMLS5 的 文档 结构 、 结 构 元 素 之 后 ， 就 可 以 用 这 些 基 础 知识 来 搭建 一 个 语义 清 
晰 、 结 构 分 明 的 HTMLS5 网 站 了 。 下 面 介绍 如 何 利用 HTMLS 的 各 种 结构 元 素 搭建 微 博 首页 。 
微 博 首 页 的 主体 结构 如 图 1-7 所 示 。 
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<footer> 


1-7” 微 博 首页 的 主体 结构 


该 页 面 主要 分 为 4 个 部 分 : 第 1 部 分 为 网 页 头 部 ， 显 示 该 微 博 网 站 的 网 站 标题 、 网 站 导 
航 链接 、 搜 索 框 ; 第 2 部 分 为 网 页 宣传 栏 和 登录 框 ， 显 示 醒 目的 内 容 ; 第 3 部 分 由 微 博文 章 、 
达 人 推荐 、 微 博 应 用 组 成 ， 是 该 微 博 网 站 首页 上 的 主要 内 容 ; 第 4 部 分 为 页 面 底部 的 版 权 信 
息 和 地 址 信息 。 

(1) 前 面 介绍 过 ，<header> 元 素 是 一 种 具有 引导 和 导航 作用 的 结构 元 素 ， 通 常 需要 放置 
一 个 标题 ,在 首页 上 , 一 般 将 标题 与 整个 网 站 的 导航 链接 作为 整体 网 页 的 标题 放置 在 <header> 
元 素 中 。 如 前 所 述 ，<nav> 元 素 是 一 个 可 以 作为 页 面 导航 的 链接 组 ， 其 中 的 导航 元 素 链接 到 
其 他 页 面 或 当前 页 面 的 其 他 部 分 。 这 里 我 们 使 用 图 片 logo 作为 标题 ， 并 把 整个 网 站 的 导航 链 
接 放 在 该 <nav> 元 素 中 。 该 部 分 的 结构 代码 如 下 所 示 : 

<header id="global header"> 

<div class="header"> 
<div class="header logo"><hl><img src="images/logo update 02.png" 
width="190" height="34" alt=" 人 人 微 博 "/> </hl> </div> 
<nav class="header Llist"> 
</nav> 
</div> 

</header> 

我 们 使 用 了 一 个 小 技巧， 可 以 指定 <img> 元 素 的 alt 属性， 并 使 用 <hl> 元 素 包含 <img> 元 
素 ， 这 样 al 的 属性 就 会 作为 标题 显示 在 文档 大 纲 中 ， 由 于 <h1> 元 素 的 默认 边 距 太 宽 会 使 得 
<img> 元 素 显 示 在 外 部 ， 我 们 在 index.css 中 添加 如 下 代码 : 


hl1,h2,h3,h4,h5,h6{padding:0; margin:0} 


(2) 将 网 页 宣传 栏 和 登录 框 修改 为 <section> 元 素 : 


<section class="banner"> 
<div id="show"><img src="images/banner2.jpg" alt=" 图 片 " /></div> 
<div id="msg"> </div> 
<div id="usrlogin"> </div> 

</section> 


(3) 实现 微 博 网 站 首页 的 主要 内 容 部 分 ， 左 侧 为 微 博文 章 列表 ， 每 一 篇 文章 都 可 以 包含 
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自己 独立 的 内 容 ， 我 们 使 用 <article> 元 素 。 右 侧 是 侧 边 栏 ， 可 以 将 微 博 达 人 、 下 载 微 博 应 用 
的 链接 等 不 是 主体 内 容 的 其 他 附属 内 容 放 在 <aside> 元 素 中 。 由 于 微 博 达 人 、 下 载 微 博 应 用 是 
不 同 的 内 容 ， 可 以 使 用 <section> 元 素 表 示 不 同 的 节 、 不 同 的 内 容 。 


代码 结构 如 下 : 

<div id="content"> 
<div id="saying"> 
<div id="sayframe"> 


<article 
<article 
<article 
</div> 
</div> 
</div> 
<aside> 


id="weibol" 
id="weibo2" 
id="weibo3" 


class="weibo"></article> 
class="weibo"></article> 
class="weibo"></article> 


<section class="fav people"> </section> 


<section> </section> 


</aside> 


(4) 实现 页 面 底部 信息 ， 包 含 版 权 信 息 和 联系 信息 ， 这 里 使 用 <address> 元 素 完 成 联系 信 


息 。 代 码 如 下 : 


<footer id="footer"> 


Copyright 人 人 微 博 All rights reserved. 
<address> 联 系 我 们 (QQ) :12345678</address> 


</footer> 


至 此 ， 整 个 首页 的 改版 就 完成 了 ， 整 个 页 面 看 起 来 和 原来 没什么 区 别 ， 但 是 它 已 经 是 全 
新 的 HTMLS5 页 面 了 ， 也 可 以 通过 大 纲 工 具 查 看 微 博 首页 的 文档 大 纲 。 


2) 实现 微 博 个 人 主页 

我 们 再 来 修改 微 博 个 人 主页 为 HTMLS5 版 本 。 该 页 面 主要 分 为 4 个 部 分 : 第 1 部 分 为 网 
页 头 部 ， 显 示 该 微 博 网 站 的 网 站 标题 、 网 站 导航 链接 、 搜 索 框 ， 与 微 博 首页 是 相同 的 ; 第 2 
部 分 是 左边 栏 ， 包 括 我 的 信息 、 每 日 记事 、 我 的 关注 ， 第 3 部 分 包括 发 布 微 博 、 最 新 微 博 列 
表 ; 第 4 部 分 为 页 面 底部 的 版 权 信息 和 地 址 信息 ， 与 微 博 首页 是 相同 的 。 

(1) 按照 mdex.html 头 部 代码 修改 徽 博 个 人 主页 的 头 部 。 

(2) 在 左边 栏 中 ， 可 以 用 <aside> 元 素来 显示 。 将 我 的 信息 、 每 日 记事 、 我 的 关注 放 在 侧 


边栏 中 ， 结 构 代 码 如 下 所 示 : 


<aside class="cont Left"> 


<section class="cont Leftone"> 


<div> 
</section> 


<div class="cont threetop"> 
<h3><span class="cont tretopl cont two_n"> 我 的 信息 </span></h3> 


<section class="cont Lefttwo"> 


<div class="cont threetop"> 
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<h3><span class="cont tretop1 cont two_n"> 每 日 记事 </span></h3> 
<div> 

</section> 

<section class="cont Leftthree"> 
<div class="cont threetop"> 
<h3><span class="cont tretopl cont two_n"> 我 的 关注 </span></h3> 
<div> 

</section> 

</aside> 


(3) 第 3 部 分 微 博 列表 使 用 <article> 元 素来 显示 每 一 篇 微 博文 章 。 下 面 给 出 部 分 代码 : 


<article class="cont down4 b"> 
<span class="fo"> 张 三 : </span> 
世界 上 最 美丽 的 天 坑 ， 阿 曼 Bimmah 天 坑 ， 当 地 人 则 说 ， 它 是 月 亮 上 掉 下 来 的 一 块 碎片 砸 进 地 里 
造成 的 。 
[图 片 ]<img src="images/4c1d5964jwldun6cuiqtrj.jpg" /> 
</article> 


(4) 按照 ndex.html 底部 代码 修改 微 博 个 人 主页 的 底部 。 


1.5 HTMLS 使 用 列表 


1.5.1 使 用 <ul> 元 素 创 建 无 序列 表 


我 们 经 常 在 网 页 上 看 到 不 同 的 文字 列表 和 图 片 列表 ， 比 如 图 1-8 所 示 的 无 序列 表 。 
份 热 搂 榜首 页 


加 立时 热 搜 榜 
QQ 综合 热 搜 榜 
加 时 事 热 搜 榜 
日 影视 热 搜 榜 
辐 财经 热 搜 榜 
她 各 人 热 搜 榜 
图 1-8 无 序列 表 





这 是 使 用 <ul>( 即 “unordered list”， 无 序列 表 之 意 ) 元 素 创建 的 。 在 HIML4 中 ，<ul> 元 
素 的 compact 和 type 属性 是 不 推荐 使 用 的 。 在 HTMLS5 中 , 不 再 支持 这 两 个 属性 。 代 码 如 下 : 


<ul> 
<1i><a href="#"> 热 搜 榜首 页 </a></1i> 








<1i><a href="#"> 影 视 执 搜 榜 </a></1i> 
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<1i><a href="#"> 财 经 热 搜 榜 </a></1i> 
<1i><a href="#"> 名 人 热 搜 榜 </a></1i> 
</ul> 


1.5.2 ”使 用 <ol> 元 素 创建 有 序列 表 
有 时 候 我 们 希望 给 列表 加 上 序号 ， 以 表示 有 序 的 列表 ， 只 需要 将 每 一 个 列表 项 嵌 套 于 <ol> 
元 素 内 。 比 如 下 面 的 例子 : 


ly 
<1i>Coffee</1i> 
<1Li>Tea</1i> 
<1Li>Milk</1Li> 
</ol> 


在 HIML4 中 不 赞成 使 用 start 和 type 属性 ， 但 是 在 HIMLS 中 支持 。 我 们 来 看 下 面 的 
例子 : 
<ol start="50"> 
<1i>Coffee</1i> 
<li>Tea</1i> 


<1i>Milk</1i> 
</ol> 


运行 效果 如 图 1-9 所 示 。 


HTML5 列表 





图 1-9 有 序列 表 的 运行 效果 


type 属性 让 我 们 可 以 使 用 数字 (1、2、3)、 字 母 (A、B、 〇 ) 或 罗马 数字 Gi、 二 、 霹 ) 标 识 序号 。 
表 1-1 给 出 了 可 用 选项 。 


表 1-1 textarea 元 素 属性 
















和 decimal 小 数 (默认 ) 
a | lower-alpha 小 写 拉 丁字 母 
A | upper-alpha 大 写 拉 丁字 母 





小 写 罗马 数字 





lower-roman 






HIML5 中 新 增 了 reverse 属性 ， 让 我 们 可 以 反 转 有 序列 表 的 顺序 。 例 如 : 


<ol start="4" reversed type="A"> 
<l1i>Coffee</1i> 
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<li>Tea</1i> 
<l1i>Milk</1i> 
</ol> 


运行 效果 如 图 1-10 所 示 。 


HTML5 列表 


D. Coffee 
Cc. Tea 
B. Milk 


图 1-10 有 序列 表 反 转 的 运行 效果 





实现 导航 
我 们 可 以 使 用 列表 实现 项 部 的 导航 栏 ， 代 码 如 下 : 


<nav class="header Llist"> 
<ul> 
<li><a href="index.html" target=" self"> 首 页 </a></1i> 
<li><a href="guangchang.html" target=" self"> 广 场 </a></1i> 
<1i><a href="game.html" target=" blank"> 游 戏 </a></1i> 
</ul> 
</nav> 


1.6 HTMLS 语义 元 素 


1.6.1 <ruby> 元 素 


<ruby> 元 素 用 来 显示 包含 文字 的 注音 。ruby 原本 是 印刷 语言 ， 指 放 于 表意 文字 上 方 或 右 
边 的 拼音 或 批注 , 广泛 应 用 于 日 文 和 中 文 。<ruby> 元 素 内 可 以 包含 <rt> 元 素 ，<rt> 元 素 用 来 显 
示 要 加 上 注音 标注 的 文字 , 也 就 是 用 来 显示 标注 的 注音 符号 , <r 忆 元 素 的 内 容 则 可 放置 <ruby> 
元 素 外 的 任何 内 联 元 素 。 例 如 : 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
</head> 
<body> 
<ruby> 
前 端 开发 ”<rt>qian duan kai fa</rt> 
</ruby> 
</body> 
</html> 








运行 效果 如 图 1-11 所 示 。 


qian duan kai fa 
sn 局 


且 浙 
图 1-11 <mby> 元 素 的 运行 效果 
1.6.2 ”<small> 元 素 
<small> 元 素 代表 小 打印 体 ， 如 版 权 信息 、 条 款 或 法 律 信息 。 缩 小 字体 应 该 由 CSS 来 完成 。 
<small>Copyright 人 人 微 博 All rights reserved.</small> 
1.6.3 ”<time> 元 素 


<time> 元 素 表 示 内 容 是 日 期 类 型 ， 可 以 是 各 种 格式 的 时 间 、 时 区 偏 移 字 符 串 、 持 续 时 间 
字符 串 ， 它 有 datetime 属性 ， 用 来 表示 以 计算 机 可 识别 的 格式 记录 相同 的 日 期 和 时 间 。 例如 : 
<p> 会 议 开始 于 <time>20:00</time>./p> 


如 省 略 datetime 属性 , 则 <time> 元 素 的 内 容 必 须 符合 datetime 的 有 效 格式 , 如 表 1-2 所 示 。 


表 1-2 time 的 有 效 格式 


格 式 示例 

有 效 的 日 期 字符 串 <time>2015-1-1</time> 

有 效 的 “月 ”日 期 字符 串 <time>2015-1</time> 

有 效 的 “月 日 ”日 期 字符 串 <time>1-1</time> 

有 效 的 本 地 日 期 和 时 间 字 符 串 _ | <time>2015-1-1T11:11</time> 

有 效 的 时 间 字 符 串 <time>11:11</time> 

有 效 的 时 区 偏 移 字 符 串 Oe 
<time>-0800</time> 


<time>2015-1-1T14:54+0000</time> 
有 效 的 全 球 日 期 和 时 间 字 符 串 | <time>2015-1-1T06:54-0800</time> 
<time>2015-1-1T06:54:39-0800</time> 














有 效 的 周 字符 串 <time>2015-W1</time> 
有 效 的 非 负 整数 年 份 字符 串 <time>2015</time> 
有 效 的 持续 时 间 字符 串 <time>2h 3m 38s</time> 
有 效 的 日 期 字符 串 <time>2015-1-1</time> 














下 面 的 例子 以 人 类 可 读 的 形式 展现 有 效 日 期 并 提供 计算 机 可 以 识别 的 日 期 格式 : 


<p> 我 们 见面 的 日 期 是 <time datetime="2009-09-23"> 星 期 二 </time>.</p> 
<time datetime="2015-1-1">New Year's Day 2013</time> 
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1.6.4 ”<details> 元 素 








<details> 元 素 定 义 元 素 细节 ， 用户 可 以 查看 , 也 可 以 通过 点 击 进行 隐藏 。 请 看 下 面 的 例子 : 


<details> 
<summary>HTML5</summary> 
<p> 用 户 优先 </p> 
<p> 化 繁 为 简 </p> 

<p> 新 的 DOCTYPE</p> 
</details> 


<summary> 元 素 从 属于 <details> 元 素 ， 用 鼠标 点 击 <summary> 元 素 中 的 内 容 文字 时 ， 
<details> 元 素 中 的 其 他 所 有 从 属 元 素 将 展开 或 收缩 。<details> 元 素 的 open 属性 定义 了 details 
是 否 可 见 ， 添 加 该 属性 后 ， 在 画面 打开 时 细节 区 域 则 会 处 于 展开 状态 。 上 述 代码 的 运行 效果 
如 图 1-12 所 示 。 


用 户 优先 


化 繁 为 简 
新 的 DOCTYPE 





图 1-12 ”<details> 元 素 的 运行 效果 


1.6.5 “<progress> 元 素 


<progress> 元 素 表示 进度 条 ， 它 的 属性 包括 value 和 max，value 表示 当前 进度 ，max 表 
示 需 要 完成 的 进度 。value 属性 和 max 属性 只 能 指定 为 有 效 的 浮 点 数 。value 属性 的 值 必须 大 
于 0， 且 小 于 等 于 max 属性 。 例 如 : 


<progress value="70" max="100">70 %</progress> 


运行 效果 如 图 1-13 所 示 。 


| 


图 1-13 ”<progress> 元 素 的 运行 效果 





1.6.6 ”<datalist> 元 素 


<datalis 忆 元 素 定义 选项 列表 。datalist 及 其 选项 不 会 被 显示 出 来 , 它 仅 是 合法 的 输入 值 列 
表 。 比 如 : 


<input list="cars" /> 

<datalist id="cars"> 
<option value="BMW"/> 
<option value="Ford"/> 
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<option value="Volvo"/> 
</datalist> 


运行 效果 如 图 1-14 所 示 。 





图 1-14 ”<datalis 忆 元 素 的 运行 效果 


1.6.7 <meter> 元 素 


<meter> 元 素 表示 已 知 范 围 的 度量 衡 ， 比 如 磁盘 用 量 、 调 查 结果 等 。 常 用 属性 有 : 
ax: 规定 范围 的 最 大 值 ， 默 认 是 1。 

min: 规定 范围 的 最 小 值 ， 默 认 是 0。 

high:， 规定 被 视 为 高 的 值 的 范围 。 

low: 规定 被 视 为 低 的 值 的 范围 。 

value: 必需 的 属性 ， 规 定 度量 的 当前 值 。 

比如 下 面 的 例子 : 


<p><meter high=".8" value=".5"></meter></p> 
<p> 如 果 value 的 值 大 于 max 的 值 ，value 的 值 将 变 为 max 的 值 <meter value="5"></meter></p> 


<p> 如 果 value 的 值 大 于 high 的 值 ， 以 黄色 警告 显示 值 的 度量 <meter value=" .9" high=" .8"> 
</meter></p> 


这 段 代码 的 运行 效果 如 图 1-15 所 示 。 


如 果 value 的 值 大 于 max 的 值 ，value 得 值 将 变 为 max 的 值 0 
如 果 value 的 值 大 于 high 的 值 ， 以 黄色 警告 显示 值 的 度量 0 








图 1-15 ”<meter> 元 素 的 运行 效果 


1.6.8 <mark> 元 素 


<mark> 元 素 表 示 带 记号 的 文本 (高 亮 显示 文本 )， 其 初衷 是 将 注意 力 吸 引 到 文档 中 标记 的 
部 分 ， 类 似 于 纸 质 书 中 使 用 高 亮 笔 标 注 内 容 。 比 如 : 
<p> 我 们 的 任务 是 熟悉 <mark> 前 端 开发 !</mark></p> 


这 段 代 码 的 运行 效果 如 图 1-16 所 示 。 
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我 们 的 任务 是 熟悉 前 端 开 发 ! 





图 1-16 ”<mark> 元 素 的 运行 效果 


1.6.9 <figure> 及 <figcaption> 元 素 


<figure> 元 素 用 来 表示 网 页 上 一 块 独立 的 内 容 ， 将 其 从 网 页 上 移 除 后 不 会 对 网 页 上 的 其 
他 内 容 产生 任何 影响 。 可 包含 插图 、 统 计 图 、 代 码 块 等 。 它 包含 一 个 可 选 的 <figcaption> 元 素 ， 
来 定义 <figure> 元 素 的 标题 ，<figcaption> 元 素 应 该 被 置 于 <figure> 元 素 的 第 一 个 或 最 后 一 个 
子 元 素 的 位 置 ，<figure> 元 素 内 最 多 只 允许 放置 一 个 <figcaption> 元 素 。 比 如 : 
<p> 泰山 日 出 是 岱 顶 奇观 之 一 ， 也 是 泰山 的 重要 标志 </p> 
<figure> 
<figcaption> 泰 山 日 出 </figcaption> 
<img src="richu.jpg"/> 
</figure> 














这 段 代码 的 运行 效果 如 图 1-17 所 示 。 
素 山 日 出 是 化 顶 奇观 之 一 ， 也 是 泰山 的 重要 标志 
素 山 日 出 





图 1-17 <figure> 及 <figcaption> 元 素 的 运行 效果 


1.7 HTMLS 多 媒体 


HTMLS5 为 网 页 带 来 了 全 新 的 标准 原生 视频 和 音频 泻 染 规范 , 并 增加 了 <audio> 和 <video> 
元 素 。<audio> 和 <video> 元 素 的 出 现 让 HIMLS 的 媒体 应 用 多 了 新 选择 ， 开 发 人 员 不 必 使 用 
插件 就 能 播放 音频 和 视频 。 本 章 先 介绍 一 些 <audio> 和 <video> 元 素 的 基础 使 用 方法 ， 然 后 考 
虑 一 些 常 见 的 编码 和 跨 浏览 器 问题 。 

1.7.1 <audio> 元 素 

<audio> 元 素 也 是 HIML5 的 新 元 素 ， 允 许 开发 人 员 在 其 网 站 上 嵌入 音乐 ， 下 面 是 一 个 
<audio> 示 例 : 

<audio src="/test/audio.ogg"> 


<p> 你 的 浏览 器 不 支持 audio 元 素 .</p> 
</audio> 
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万 一 某 些 用 户 的 浏览 器 不 支持 <audio> 元 素 , 那么 他 们 会 得 到 一 个 提示 。 还 可 以 将 音频 源 
文件 的 位 置 放 在 元 素 之 间 : 


<audio> 





<source src="music.0gg"> 
</audio> 


下 面 我 们 介绍 <audio> 元 素 的 属性 。HTML5 中 的 <audio> 元 素 和 <video> 元 素 有 很 多 相同 
处 ， 两 者 都 支持 的 操作 有 播放 、 和 暂停 、 静 音 /消除 静音 、 加 载 等 ， 因 此 通用 的 动作 形成 了 
<audio> 元 素 和 <video> 元 素 的 通用 属性 。 表 1-3 给 出 了 通用 媒体 属性 。 





表 1-3 通用 媒体 属性 





属 性 解释 
autopla 将 媒体 文件 设置 为 创建 后 自动 播放 ， 或 者 查询 是 否 已 设置 为 autoplay 

如 果 媒 体 文件 播放 完毕 后 能 重新 播放 则 返回 tme， 或 者 将 媒体 文件 设置 为 循环 播放 (或 不 
py 循环 播 


以 秒 为 单位 返回 从 开始 播放 到 现在 所 用 的 时 间 。 在 播放 过 程 中 ， 设 置 curentTime 来 进行 


SentTime | 搜索 ， 并 定位 到 媒体 文件 的 特定 位 轩 

controls | 显示 或 隐藏 用 户 控制 界面， 或 者 查询 用 户 控制 界面 当前 是 否 可 见 

volume | 在 00 到 10 之 间 设 站 音量 的 相对 值 ， 或 者 查询 当前 音量 的 相对 值 

i 为 音频 文件 设置 静音 或 消除 静音 ， 或 者 检测 当前 是 否 为 静音 

| 甫 入 帮 器 在 名 体 文人 开始 播 放 首 ,是 否 进 行伍 加载 . 如果 并 休 文件 已 设置 为 autopley， 
则 忽 咯 此 特性 

ee 如 果 出 现 该 属性 ， 则 视频 在 页 面 加 载 时 进行 加 载 ， 并 预备 播放 。 如 果 媒 体 文件 已 设置 为 


autoplay， 则 忽略 此 特性 


此 外 ， 还 有 一 些 只 读 属 性 ， 比 如 duration、paused、ended、startTime 等 。 
1.7.2 ”<video> 元 素 
先 用 一 段 简 单 的 代码 来 显示 视频 : 
<video src="http://v2v.cc/~j/theora testsuite/320x240.0gg" controls autoplay> 


Your browser does not support the <code>video</code> element. 
</video> 





这 里 声明 了 autoplay 属性 ， 这 样 一 来 ， 页 面 加 载 完 成 后 ， 视 频 马 上 会 被 自动 播放 。 运 行 
效果 如 图 1-18 所 示 。 
<video> 元 素 还 有 额外 的 属性 ， 如 表 1-4 所 示 。 
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表 1-4 <video> 元 素 的 属性 





属 性 描述 
在 视频 加 载 完成 之 前 ， 代 表 视 频 内 容 的 图 片 的 URL 地 址 。 该 特性 不 仅 可 
下 读 ， 而 且 可 以 修改 ， 以 便 更 换 图 片 
width 读 取 或 设置 显示 尺寸 。 如 果 设 置 的 宽度 与 视频 本 身 的 大 小 不 匹配 ， 则 可 
height 能 导致 居中 显示 或 出 现 黑色 条 状 区 域 
VideoWidth 


只 读 ， 返 回 视频 的 固有 或 自 适 应 的 宽度 和 高 度 





VideoHeight 


1.7.3 音频、 视频 容器 和 编 解 码 器 


HTML5 过 到 的 最 大 挑战 是 视频 编码 问题 ， 这 需要 了 解 音 频 、 视 频 容器 和 编 解 码 器 。 

主流 视频 容器 支持 如 下 视频 格式 : 

® Audio Video Interleave(.avi) 

® Flashvideo(.flv) 

® MPEG 4(.mp4) 

® Matroska(.mkv) 

® Ogg(.ogv) 

不 论 是 音频 文件 还 是 视频 文件 , 实际 上 都 只 是 容器 文件 , 这 类 似 于 压缩 了 一 组 文件 的 ZIP 

文件 。 视 频 文件 (视频 容器 ) 包 含 音频 轨道 、 视 频 轨道 和 其 他 一 些 元 数据 。 视 频 播 放 时 ， 音 频 


轨道 和 视频 轨道 是 绑 定 在 一 起 的 。 元 数据 部 分 包含 该 视频 的 封面 、 标 题 、 子 标题 、 字 幕 等 相 
关 信息 。 

下 面 是 一 些 音频 编 解 码 器 : 

® AAC 

® MPEG-3 


® OggVorbis 
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下 面 是 一 些 视频 编 解 码 器 : 

® MPEG-4(H.264) 

® VP8(WebM) 

® OggTheora 

主要 的 挑战 是 MPEG-4 编码 ， 它 要 求 任 何 使 用 该 产品 的 厂商 购买 授权 许可 ，Apple、 
Microsoft 支持 具有 专利 保护 的 MPET-4 格式 ，Google、Opera、Mozilla 支持 免费 、 开 源 或 者 
诸如 WebM 或 OGG/Theora 等 版 权 免费 的 视频 格式 。 没 有 任何 一 种 编 解 码 器 可 以 被 所 有 浏览 
器 厂商 接受 并 在 其 产品 中 提供 支持 ， 如 图 1-19 所 示 。 
















and basiery li 












canPlay Typel) not roportng on Vorbts, but audo 15 piayng 





4 Android Lolipop contains a software decoder that makes H265 play in Chrome 





图 1-19 浏览 器 与 视频 编码 





HTMLS 规范 本 来 打算 指定 编 解 码 器 的 计划 实施 起 来 困难 重重 ， 最 终 还 是 放弃 了 对 编 解 
人 码 器 的 要 求 ， 并 支持 主要 的 三 种 格式 : MP4、WebM、Ogg/Ogv。 我 们 要 做 的 只 能 是 熟悉 各 
种 浏览 器 的 支持 情况 ， 针 对 不 同 的 浏览 器 环境 对 媒体 文件 进行 重新 编码 。 这 里 推荐 使 用 
Imirovideoconverter， 这 是 一 款 非常 易 用 且 完 全 免费 的 软件 ， 它 支持 多 种 不 同 视 频 类 型 之 间 的 
转换 ， 地 址 为 http://www.mirovideoconverter.com/。 

我 们 可 以 在 type 属性 中 设置 多 媒体 类 型 和 多 媒体 的 编码 ， 比 如 : 


<source src="foo.mp4" type="video/mp4; codecs=avcl1.42E01E, mp4a.40.2"> 

















<source src="fo0.0gg" type="video/ogg; codecs=dirac, speex"> 

如 果 我 们 明确 知道 浏览 器 支持 某 种 类 型 ， 那 么 明确 写 清楚 这 种 类 型 显然 更 明智 。 和 否则， 
最 好 是 省 略 type 属性 , 让 浏览 器 自己 检测 编码 。 因为 如 果 type 属性 中 指定 的 类 型 与 源 文件 不 
匹配 ， 浏 览 器 可 能 就 会 拒绝 播放 。 
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1.7.4” 跨 浏览 器 问题 


我 们 肯定 希望 所 有 主流 浏览 器 都 能 够 播放 音频 或 视频 ， 我 们 可 以 准备 多 个 视频 和 音频 
源 ， 浏 览 器 可 以 从 这 么 多 的 来 源 中 自动 选择 ， 下 面 通过 使 用 多 个 <source> 元 素 ， 在 <video> 元 
素 中 提供 多 种 格式 的 视频 文件 。 代 码 如 下 : 


<video controls> 
<source src="somevideo.webm" type="video/webm"> 
<source src="somevideo.mp4" type="video/mp4"> 
<source src="somevideo.ogv" type="video/ogg"> 
</video> 


对 于 不 支持 HTMLS5 多 媒体 元 素 的 旧 浏 览 器 ， 可 以 添加 额外 的 向 后 兼容 内 容 ， 我 们 可 以 
使 用 Flash 播放 器 提供 音频 或 视频 ， 比 如 : 


<video src="video.ogv" controls> 
<object data="flvplayer.swf" type="application/x-shockwave-flash"> 
<param value="flvplayer.swf" name="movie"/> 
</object> 
</video> 





下 面 我 们 在 首页 实现 视频 微 博 的 功能 , 使 用 <video> 元 素 在 首页 播放 一 段 视频 ,代码 如 下 : 


<section id="play weibo"> 
<h3> 视 频 微 博 </h3> 
<div id="pic weibo"> 
<video width="320" height="240" controls poster="images/pic weibo.png"> 
<source src="video/big.ogv" type="video/ogg"> 
<source src="video/big.mp4" type="video/mp4"> 
</video> 
</div> 
<div id="mobile"><img src="images/mobile.png"/></div> 
</section> 


1.8 HTMLS 表单 介绍 


HTMLS5 表单 并 没有 完全 修改 以 前 的 表单 规范 ，HTMLS5 表单 规范 更 加 注重 对 现 有 的 
HTML 表单 功能 进行 改进 ， 以 使 其 包含 更 多 控件 类 型 。HTMLS5 表单 仍然 使 用 <form> 元 素 作 
为 容器 , 我 们 可 以 在 其 中 设置 基本 的 提交 特性 。 之 前 所 讲 的 表单 控件 ， 如 文本 框 、 单 选 按钮 、 
复 选 框 等 ， 都 兼容 原来 的 使 用 方法 。 当 用 户 提交 页 面 时 ， 表 单 仍然 用 于 向 服务 器 发 送 表 单 中 
控件 的 值 ， 我 们 仍 可 放心 地 使 用 JavaScript 操作 表单 控件 或 者 编写 自己 的 处 理 函数 。 

<form> 元 素 除了 带 有 action、method、target 属性 外 ， 还 可 以 带 有 以 下 属性 : novalidate、 
autocomplete、enctype。 


novalidate 属性 是 一 个 布尔 值 , 用 来 指定 表单 在 提交 时 是 否 应 该 进行 校 验 。 如 果 该 属性 存 
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在 ， 则 浏览 器 不 会 在 提交 表单 前 校 验 表单 。 例 如 : 


<form action="example.jsp" novalidate> 





autocomplete 属性 指明 浏览 器 是 否 应 该 自动 填写 表单 值 ,将 之 设置 为 off 指明 浏览 器 不 应 
动 填写 任何 内 容 ， 默 认 值 为 on。 例如 : 


<form action="example.jsp" autocomplete="off" > 











莹 








enctype 属性 用 于 指定 浏览 器 在 将 数据 发 送 到 服务 器 之 前 如 何 对 其 进行 编码 , 浏览 器 通常 
支持 三 种 类 型 的 编码 方式 ，application/x-www-fonm-urlencoded 作为 默认 值 是 大 多 数 表单 使 用 
的 标准 方法 ,因为 一 些 字符 ， 如 空格 、 加 号 以 及 一 些 非 字母 数字 字符 不 能 直接 发 送 到 服务 器 ， 
在 使 用 此 属性 值 时 ， 这 些 字 符 会 被 其 他 可 用 的 字符 替代 ; multipart/form-data 属性 值 允许 数据 
分 成 几 个 部 分 传送 ， 每 一 个 连续 部 分 以 其 在 表单 中 出 现 的 顺序 对 应 一 个 表单 控件 ， 该 方式 通 
常 被 用 于 用 户 需要 向 服务 器 上 传 文件 、 图 片 时 ， 每 一 个 部 分 可 以 有 一 个 属于 它 自己 的 可 选 的 
content-type 头 部 信息 ， 用 来 指定 所 属 表单 控件 的 数据 类 型 ，text/plain 以 纯 文本 形式 不 加 修改 
地 将 数据 发 送 至 服务 器 。 


1.9 HTMLS 新 增 的 输入 元 素 








在 继续 学 习 之 前 ， 我 们 看 一 下 在 人 人 微 博 网 站 中 的 哪些 地 方 用 到 了 表单 ? 有 注册 表单 、 
登录 表单 、 个 人 信息 表单 、 微 博 发 布 表单 。 可 见 人 人 微 博 的 核心 功能 都 是 通过 表单 实现 的 ， 
表单 的 创建 不 仅 要 符合 用 户 的 操作 需求 和 业务 需求 ， 还 要 考虑 与 服务 器 端 数据 的 交互 。 以 个 
人 信息 页 面 (如 图 1-20 所 示 ) 为 例 ， 用 户 的 有 些 需求 使 用 HTML4 开发 会 很 费劲 而 且 是 重复 性 
的 工作 ， 而 HTMLS 表单 可 以 利用 新 的 输入 元 素 和 属性 满足 这 些 需求 。 


首页 广场 敬 开 立 月 尖 沙 。 江 TRTTTT 二 [9 某 人 





必 别 : 加 男 日 女 


生 昌 : [EYE [Tv [6 7 








图 1-20 HIML4 个 人 信息 页 面 
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本 节 将 介绍 新 的 HIMLS 输入 类 型 以 及 一 些 新 属性 ， 它 们 极 大 地 提升 了 <input> 元 素 的 输 
入 体验 ， 特 别 是 在 移动 设备 上 ， 使 得 用 户 更 容易 填写 网 页 表单 。 旧 浏览 器 会 将 任何 未 知 类 型 
的 <input> 元 素 按 text 类 型 对 待 。 这 意味 着 即使 新 输入 元 素 和 新 属性 不 可 用 ， 我 们 也 仍然 能 
收集 数据 。 简 而 言 之 ， 浏 览 器 会 忽略 任何 它 不 理解 的 属性 ， 因 此 尽管 该 属性 可 能 尚未 得 到 支 
持 ， 即 使 用 户 使 用 了 诸如 正 6 的 浏览 器 ， 也 仍然 可 以 安全 地 使 用 这 些 属性 。 
HTMLS 新 增 的 专用 文本 输入 类 型 包括 : search、tel、url、email、number、color、range、 
日 期 和 时 间 输 入 类 型 。 
e search: 搜索 专用 字段 。 与 所 有 表单 元 素 一 样 ， 大 部 分 浏览 器 只 能 将 搜索 字段 显示 为 
一 个 标准 的 文本 字段 。 
e tel: 电话 号 码 专用 字段 。 目 前 ， 国 际 上 没有 统一 的 电话 号 码 格式 ， 因 此 为 tel 设置 类 
型 属性 似乎 不 那么 有 用 一 一 我 们 必须 在 智能 手机 或 平板 电脑 上 进行 测试 才 有 效 。 
e url: 统一 资源 定位 专用 字段 。 它 的 查验 的 严格 程度 可 能 超出 我 们 的 想象 ， 
“www.example.com” 会 遭受 拒绝 (如 图 1-21 所 示 )， 因 为 它 不 是 一 个 有 效 的 URL。 
它 要 求 一 个 以 http:// 等 开头 的 完全 合格 的 URL。 


— 


图 1-21 Chrome 拒绝 一 个 未 加 前 导 http:/ 的 URL 











e email; email 专用 字段 。 我 们 设置 输入 文本 类 型 为 email， 如 果 输 入 内 容 包含 非法 字 
符 或 没有 包含 一 个 @ 标 记 , 浏览 器 将 阻止 表单 的 提交 。 在 移动 设备 上 ， 当 用 户 单 击 该 
字段 时 ， 移 动 设备 将 显示 相应 的 键盘 。 默 认 情 况 下 ， 它 能 够 阻止 用 户 在 该 字段 中 填 
入 多 个 email 地 址 。 除 非 我 们 在 <input> 标 签 中 设置 如 下 所 示 的 multiple 属性 ， 否 则 只 
允许 使 用 一 个 email 地 址 : 


<input type="email" name="email" id="email" multiple> 


。 number: 数值 专用 字段 。 创建 一 个 适用 于 数值 输入 的 字段 。 最 新 版 本 的 主流 桌面 济 
览 器 均 显示 一 个 与 图 2-22 类 似 的 能 够 翻动 数字 的 输入 框 。 单 击 和 输入 框 右 侧 的 向 上 箭 
头 (或 者 按 上 方向 键 ) 能 够 增 大 字段 中 的 数字 ， 而 单 击 向 下 箭头 (或 者 按 下 方向 键 ) 能 够 
减 小 字段 中 的 数字 。 在 移动 设备 上 ， 单 击 该 字段 将 显示 一 个 数字 键盘 ， 但 我 们 也 可 
以 切换 到 数字 字母 输入 方式 。 





Tickets 


图 1-22 数字 翻动 输入 框 使 得 更 便于 输入 数字 值 


e@ ”color: 颜色 选择 器 专用 字段 。 在 Firefox、Chrome 浏览 器 中 的 显示 效果 如 图 1-23 所 示 。 
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图 1-23 color 字段 在 Firefox、Chrome 浏览 器 中 的 显示 效果 


在 Android 设备 上 的 显示 效果 如 图 1-24 所 示 。 





选择 颜色 图 








图 1-24 color 字段 在 Android 设备 上 的 显示 效果 


erange: 数值 滑动 条 专用 字段 。 它 能 够 创建 一 个 允许 用 户 选 择 数值 的 滑动 条 ， 显 示 效 
果 如 图 1-25 所 示 。 





Rating- 





图 1-25 range 字段 的 显示 效果 


数值 滑动 条 适合 于 对 值 的 要 求 不 是 太 精 确 的 情况 ， 因 为 通过 滑动 来 得 到 一 个 精确 的 值 会 
比较 难 操作 ， 但 我 们 可 以 进一步 设置 默认 的 范围 和 递增 值 来 达到 更 好 的 效果 ， 比 如 下 面 的 
例子 : 

<input type="range" name="rating" id="rating" min="0" max="25" step="5" 

value="0"> 

通过 设置 mix 和 max 属性 ， 范 围 被 限制 为 0~25， 通 过 设置 step 使 得 步 长 为 5。 

那么 如 何 显示 滑动 条 的 值 呢 ? 这 里 可 以 使 用 <outpuf> 元 素 并 在 滑动 条 字段 上 使 用 onchange 
属性 来 实现 ，output 元 素 是 HTMLS5 中 新 增 的 、 专 门 用 于 不 同类 型 的 输出 的 元 素 。 完 整 的 代 
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码 如 下 : 


<input type="range" name="rating" id="rating" min="0" max="25" step="5" 
value="0" onchange="displayRate.value=this.value"> 


<output name="displayRate" for="rating"></output> 


显示 效果 如 图 1-26 所 示 。 





Rating: 目 E] 





图 1-26 ”<output> 元 素 的 显示 效果 


<textarea> 元 素 定义 一 个 文本 区 域 (textarea)， 它 是 一 个 多 行 的 文本 输入 区 域 。 用 户 可 以 在 
此 文本 区 域 中 写 文 本 。 在 文本 区 域 中 ， 可 以 输入 无 限 数量 的 文本 。 文 本 区 域 中 的 默认 字体 是 
等 宽 字体 (fixed pitch)。 它 的 语法 为 : 

<textarea name=" 文 本 域名 称 "” value=" 文 本 域 默认 值 ” rows=" 行 数 " cols=" 列 数 "> 

这 里 是 文本 域 中 的 文本 


</textarea> 
该 元 素 属性 的 含义 如 表 1-5 所 示 。 


表 1-5 <textarea> 元 素 的 属性 




















属 性 描述 
autofocus 规定 在 页 面 加 载 后 文本 区 域 自动 获得 焦点 
cols 规定 文本 区 域内 的 可 见 列 数 
disabled 规定 禁用 该 文本 区 域 
form 规定 文本 区 域 所 属 的 表单 
maxlength 规定 文本 区 域 的 最 大 字符 数 
name 规定 文本 区 域 的 名 称 
placeholder 规定 描述 文本 区 域 预期 值 的 简短 提示 
readonl 规定 文本 区 域 为 只 读 
required 规定 文本 区 域 是 必 填 的 
Tows 规定 文本 区 域内 的 可 见 行 数 
wrap 规定 当 在 表单 中 提交 时 ， 文 本 区 域 中 的 文本 如 何 换行 
通常 情况 下 ， 当 用 户 在 输入 文本 区 域 中 键入 文本 后 ， 浏 览 器 会 将 它们 按照 键入 时 的 状态 





发 送 给 服务 器 。 只 在 用 户 按 下 Enter 键 的 地 方 生成 换行 。 如 果 我 们 希望 启动 自动 换行 功能 ， 
当 用 户 键入 的 一 行文 本 长 于 文本 区 域 的 宽度 时 ， 浏 览 器 会 自动 将 多 余 的 文字 移动 到 下 一 行 。 
wrap 属性 的 取 值 有 SOFT、HARD、OFF。 比 如 ， 我 们 分 别 创建 含 4 个 不 同 的 wrap 属性 值 的 
<areatext> 元 素 ， 输 入 相同 的 内 容 ， 将 <textarea> 元 素 的 内 容 提交 到 服务 器 端 ， 然 后 原样 输出 
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内 容 ， 以 查看 其 区 别 。 
textareajsp 代码 如 下 : 





<sQ@ page language="java" import="java.util.*,java.text.*" 
pageEncoding="utf-8" $%> 
<html> 
<head> 
<title>Js</title> 
<meta charset="utf-8"> 
</head> 
<body> 
<form action="textwrap.jsp" method="GET"> 
<table border="" cellpadding="5"> 
<tbody> 
<tr> 
<td align="CENTER">this code</td> 
<td align="CENTER">produces this</td> 
</Er> 
<tr valign="TOP"> 
<td bgcolor="#CCCCCC"><pre>&lt; TEXTAREA NAME="SOFT" COLS=25 ROWS=5 
WRAP=SOFT</em>&gt;</pre> 
</td> 
<td> 
<textarea name="SOFT" cols="25" rows="5" wrap="SOFT">Darkness 
cannot drive out darkness; only light can do that. Hate cannot 
drive out hate; only love can do that. 
</textarea> 
</td> 
</tr> 
<tr valign="TOP"> 
<td bgcolor="#CCCCCC"><pre>&lt; TEXTAREA NAME="HARD" COLS=25 ROWS=5 
WRAP=HARD</em>&gt ;</pre> 
</td> 
<td> 
<textarea name="HARD" cols="25" rows="5" wrap="HARD">Darkness 
cannot drive out darkness; only light can do that. Hate cannot 
drive out hate; only love can do that. 
</textarea> 
</td> 
</tr> 
<tr valign="TOP"> 
<td bgcolor="#CCCCCC"><pre>&lt; TEXTAREA NAME="OFF™" COLS=25 ROWS=5 
WRAP=OFF</em>&gt;</pre> 
</td> 
<td> 
<textarea name="OFF" cols="25" rows="5" wrap="OFF">Darkness 





cannot drive out darkness; only light can do that. Hate cannot 
drive out hate; only love can do that. 
</textarea> 
</td> 
</tr> 
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<tr valign="TOP"> 


<td> 默 认 值 
<pre class="exampletext">&g]1lt;TEXTAREA NAME="NONE" COLS=25 
ROWS=5&gt; 
</pre> 
</td> 
<td> 


<textarea name="NONE" cols="25" rows="5">Darkness cannot drive 
out darkness; only light can do that. Hate cannot drive out 
hate; only love can do that. 


</textarea> 
</td> 
</tr> 
<tr valign="TOP"> 
<td>gnbsp;</td> 
<td align="CENTER"><input type="SUBMIT" value="Submit"></td> 
</tr> 
</tbody> 
</table> 
</form> 
</BODY> 
</HTML> 


运行 效果 如 图 1-27 所 示 。 





this code produces this 


《TEXTAREA NAME="SOFT” COLS=25 ROWS=5 WRAP=SOFT> | Darkness cannaot drive out 

darkness; anly light can do 
that. Hate carmot drive out 
hate; only love can do that. 














CTEXTAREA NANE="HARD” COLS=25 ROWS=5 WRAP=HARDY | Darkness cannot drive out 

darkness; amly light can do 
that. Hate carmot drive out 
hate; only love can do that. 








<TEXTAREA NAME="OFF” ODLS=25 ROWS=5 WRAP=OFF> Darkness carmot drive out dar 


4 ] » 








默认 值 Darkness camot drive out 
darkness; only light can to 
《TEXTAREA NANME="NONE” COLS=25 ROWS=5> that. Hate cammot drive out 


hate; only love can do that. 









































| Submit | 








图 1-27 <textarea> 元 素 的 运行 效果 


单 击 Submit 按钮 后 ， 将 表单 提交 到 textwrapjsp 页 面 ， 代 码 如 下 : 


<%@ page language="java" import="java.util.*,java.text.*" 
pageEncoding="utf-8" 委 > 

<html> 

<head> 
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<title>textarea</title> 

</head> 

<body> 

< 各 
out .println("<h1>SOFT</h1>") 7 
out.println("<pre>"); 
out.println (request .getParameter ("SOFT")); 
out.println("</pre>"); 
out.println ("<h1>HARD</h1>"); 
out.println("<pre>"); 
out.println (request .getParameter ("HARD")); 
out.println("</pre>"); 
out .println ("<h1l>OFF</h1>"); 
out.println("<pre>"); 
out.println (request .getParameter ("OFF")); 
out.println("</pre>"); 
out.println ("<hl>NONE</h1>"); 
out.println("<pre>"); 
out.println (request .getParameter ("NONE")); 
out.println("</pre>"); 

多 > 

</body> 

</html> 


运行 结果 如 图 1-28 所 示 。 
SOFT 


Darlmess carnot drive out darlmess; only light can do that. Hate camot drive out hate; only love can do tht. 


HARD 


Darlmess carmot drive out 

darlkmess; only light can do 
that. Hate carnot drive out 
hate; only love can do that. 


OFF 


Darlmess camot drive out darlmess; only light can do that. Hate camot drive out hate; only love can do tht. 


NONE 


Darlmess carnot drive out darlmess; only light can do that. Hate camot drive out hate; only love can do that. 


图 1-28 ”代码 运行 结果 











[ 见 ， 使 用 SOFT 值 会 在 显示 的 时 候 自动 换行 ， 发 送 到 服务 器 端的 数据 不 会 自动 换行 。 
而 使 用 HARD 值 会 在 显示 的 时 候 自动 换行 , 发 送 到 服务 器 端的 数据 也 与 用 户 看 到 的 数据 一 样 
带 有 换行 符 。 使 用 OFF 值 则 不 会 自动 换行 。 


ei 
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。 日 期 和 时 间 ; HTMLS 中 新 增加 了 date 输入 类 型 ， 我 们 先 来 看 一 下 在 Chrome 浏览 器 
中 的 显示 效果 ， 如 图 1-29 所 示 。 





HTML5 Date-related Elements 
Date- [zolwym/ 画 xs 了] 


Date and Time: 1MPAL 


周 日 周 - 周二 周三 周 四 局 五 周 六 


Local Date /Time: 
Month: 


Week- 

















图 1-29 在 Chrome 浏览 器 中 的 显示 效果 





在 Android 移动 设备 上 的 显示 效果 如 图 1-30 所 示 。 





图 1-30 在 Android 设备 上 的 显示 效果 


这 是 一 个 可 翻阅 的 日 历 ， 默 认 的 日 期 为 当前 日 期 ， 通 过 输入 框 中 的 上 下 箭头 可 以 调整 年 
件 ， 其 实现 了 将 日 期 填充 到 指定 的 输入 框 里 的 功能 ， 这 需要 编写 很 多 JavaScript 代码 。 而 在 
HIML5 中 只 需要 下 面 的 代码 就 可 以 了 : 

<input type="date" name="date" id="date"> 

这 样 非常 方便 ， 可 惜 的 是 ， 现 在 只 有 Chrome 浏览 器 支持 这 个 漂亮 的 日 历 组 件 。 如 果 其 
他 浏览 器 也 实现 了 HTML5 原生 的 日 历 组 件 ，JavaScript 版 的 日 历 组 件 将 退出 历史 舞台 。 

此 外 还 有 其 他 的 日 期 和 时 间 输 入 控件 ， 我 们 逐一 来 演示 。 

如 果 type 类 型 是 month， 则 只 能 选择 月 份 ， 如 图 1-31 所 示 。 




















。37。 


























Month- 2 末年 02 月 xx 了 

Week: 2013 年 02 月 ~ 4||e||， 
ss 局 日 局 - 周二 周三 周 四 局 五 局 六 
Time: a 


3 4 5 6 8 9 
10 1 12 13 14 15 16 
2 921 2 
24 25 26 27 28 




















图 1-31 month 输入 


如 果 type 类 型 是 week， 则 只 能 显示 周 数 ， 如 图 1-32 所 示 。 




















Week- 20 玩 年 第 一 周 x$v 

Time: 2014 年 04 月 ~ 加 加 | 可 
周 周 日 周 - 周二 周三 周 四 局 五 周 六 
14 1 | 3 4 5 


15 6 Piao vom i 
16 13 14 15 16 17 18 19 
17 20 21 22 23 24 25 26 





图 1-32 week 输入 




















如 果 type 类 型 是 datetime-local， 则 用 本 地 时 间 显 示 日 期 ， 如 图 1-33 所 示 。 





Local Date/Time: |2Is/02/13 一 :一 x3 











Month- 2015 年 0 月 ~ 





周 日 周 - 周二 周三 周 四 周 五 周 六 
Week- 

1 法 | 
A 8 9 10 1 12 1 14 
Time: 15 16 17 18 19 20 21 
22 23 24 25 26 27 28 

















图 1-33 datetime-local 输入 


如 果 type 类 型 是 tme， 则 只 能 选择 时 间 ， 如 图 1-34 所 示 。 











图 1-34 time 输入 
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1.10 HTMLS 新 增 的 表单 属性 


1.10.1 autocomplete 属性 


该 属性 规定 form 或 input 域 应 该 拥有 自动 完成 功能 ， 例 如 浏览 器 能 够 在 字段 中 显示 一 列 
最 近 输入 的 值 (如 图 1-35 所 示 )。 默 认 自动 完成 功能 是 打开 的 。 








df//df/ 
http://www 


http://www.a.com 


https://www.a.coms 





图 1-35”autocomplete 属性 
这 一 行为 因为 便捷 而 受 欢迎 ,但 有 些 情况 下 却 是 危险 行为 ， 比 如 登录 名 与 密码 信息 的 预 
填 可 能 是 很 严重 的 安全 漏洞 。 为 了 针对 整个 表单 关闭 自动 完成 功能 ， 我 们 可 以 
将 autocomplete="off' 添加 到 打开 的 <form> 标签 中 。 为 了 针对 个 别 元 素 关 闭 自动 完成 功能 ， 
将 autocomplete="off' 添加 到 相应 的 元 素 中 。 添 加 到 元 素 的 autocomplete 属性 会 覆盖 form 表 
单 的 属性 。 


1.10.2 required 属性 


该 属性 规定 必须 在 提交 之 前 填写 输入 域 (不 能 为 空 )。 经 常会 有 表单 中 的 信息 是 要 求 必须 
填写 的 。 例 如 登录 名 ， 可 以 使 用 required 属性 确保 必 填 表单 中 有 内 容 ， 表 单 才 可 以 提交 。 代 
码 如 下 : 


<input id="login name" name="login name" type="text" required/> 
1.10.3 multiple 属性 


该 属性 规定 输入 域 中 可 选择 多 个 值 。 它 适用 于 以 下 类 型 的 <input> 元 素 : email 和 file。 
默认 未 打开 该 功能 。 比 如 : 


<input type="file" name="img" multiple="multiple" /> 
1.10.4 ”autofocus 属性 


该 属性 规定 在 页 面 加 载 时 , 拥有 该 属性 的 输入 元 素 自动 获得 焦点 。 它 适用 于 所 有 <input> 
元 素 的 类 型 。 我 们 应 该 在 一 个 表单 中 使 用 autofocus 一 次 。 例 如 : 





<input type="text" name="user name" autofocus="autofocus" /> 
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1.10.5 formnovalidate 属性 





该 属性 覆盖 表单 的 novalidate 属性 。 它 适用 于 以 下 类 型 的 <input> 元 素 : submit 和 
image。 比 如 : 
<form action="submit.html" method="post" name="form1"> 
<p> 
<!-- 保存 草稿 --> 
<input type="submit" name="draft" id="draft" value="Save Draft" 
formnovalidate formaction="draft.html"> 
<!-- 提交 数据 --> 
<input type="submit" name="send" id="send" value="Submit" 
formmethod="get"> 
</p> 
</form> 


上 面 的 例子 有 一 个 保存 草稿 的 按钮 ， 我 们 不 希望 保存 草稿 时 对 表单 进行 验证 。 还 有 些 情 
况 我 们 希望 用 自 定义 的 验证 方法 验证 表单 ， 也 可 以 在 按钮 控件 上 设置 fonmnovalidate 属性 。 

此 外 ， 类 似 的 formaction 、formenctype 、formmethod、formtarget 属性 也 能 够 覆盖 表单 
属性 。 


1.10.6 ”placeholder 属性 


该 属性 会 在 输入 框 中 显示 所 期 望 的 值 或 提示 信 
失 。 在 以 前 ， 会 使 用 value 属性 提示 用 户 输入 示例 。 这 种 技术 的 缺点 是 ， 用 户 未 必 总 会 清空 
示例 输入 内 容 ， 因 此 该 文本 经 常会 作为 数据 的 一 部 分 被 包含 进来 发 送 到 服务 器 端 。 使 用 
placeholder 属性 则 可 解决 这 个 问题 。 例 如 : 





<body> 

<hl>Placeholder</h1> 

<form method="post" name="forml"> 
<p> 


<label for="zip">Zip Code:</label> 
<input type="text" name="zip" id="zip" placeholder="5 digits"> 
</p> 
<p> 
<label for="arrival">Arrival Date:</label> 
<input type="text" name="arrival" id="arrival" 
placeholder="MM/DD/YYYY"> 
</p> 
<p> 
<input type="submit" name="send" id="send" value="Submit"> 
</p> 
</form> 
</body> 


运行 效果 如 图 1-36 所 示 。 
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Placeholder 


Zip Code- 


Arrival Date- 


Submit 





图 1-36 placeholder 属性 


1.10.7 list 属性 


该 属性 规定 输入 元 素 的 选项 列表 。 我 们 在 第 1 章 学 习 了 <datalist> 元 素 ， 这 里 通过 输入 元 
素 的 list 属性 绑 定 datalist 来 定义 可 能 的 值 。 比 如 : 





Webpage: <input type="url" list="urlList" name="link" /> 
<datalist id="urlList"> 

<option label="baidu" value="http://www.baidu.com" /> 

<option label="Google" value="http://www.google.com" /> 
<option label="Microsoft" value="http://www.microsoft.com" /> 
</datalist> 


运行 效果 如 图 1-37 所 示 。 
HTMLS Datalist 





Webpage: 











http://www.baidu.com 


http://Wwww.google.com 





http://www.microsoft.com 。 Microsoft 


图 1-37 list 属性 


1.10.8 ”pattern 属性 


该 属性 规定 用 于 验证 输入 元 素 的 模式 。 也 就 是 我 们 可 以 用 自 定 义 的 方式 验证 输入 内 容 。 
Pattern 属性 必须 是 一 个 正则 表达 式 ， 根 据 要 求 建立 正则 表达 式 不 是 一 件 容易 的 事 ， 我 们 可 以 
通过 搜索 引擎 或 者 http://regexlib.comy/ 的 知识 库 ， 查 看 前 人 书写 过 的 正则 表达 式 。 比 如 : 


<input id="username" name="username" type="text" placeholder="4-10 个 英文 字母 " 
pattern=" [A-Za-z]{4,10}"” required="required" autofocus /> 


1. 案例 概述 


在 本 案例 中 ,我们 将 修改 人 人 微 博 网 站 的 用 户 个 人 信息 页 面 。 该 页 面 的 功能 是 显示 用 户 
个 人 信息 和 修改 用 户 个 人 信息 。 原 HTML4 版 本 的 效果 如 图 1-20 所 示 。 

该 页 面 主要 是 在 用 户 自 己 查 看 或 修改 信息 时 使 用 ，“ 登 录 名 ”字段 是 在 用 户 注册 时 确定 
的 ， 是 从 服务 器 端 读 取 的 数据 ， 所 以 不 能 被 修改 。 我 们 要 实现 必 输 字段 的 验证 、 字 段 有 效 长 
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度 的 验证 ， 最 后 通过 “保存 ”按钮 提交 表单 。 并 且 新 的 需求 要 求 增加 “年 龄 ”和 “备用 邮箱 ” 
字段 ， 还 要 增加 个 人 头像 上 传 功能 。 

这 里 要 求 能 够 记录 表单 的 已 输入 条 目 ， 以 便 下 次 输入 时 更 快捷 。 

2. 显示 效果 


首先 来 看 一 下 改版 后 的 页 面 在 浏览 器 中 的 显示 效果 ， 如 图 1-38 所 示 。 


E 称 : 
和] 趟 过 择 任 何 文件 
”引信 


真实 姓名 : 

“所 在 地 : 
性别: . 
年 龄 : 

备用 邮箱 : 
生日 : 


博客 地 址 : 





图 1-38 改版 后 的 个 人 信息 页 面 


该 页 面 需要 具有 自动 验证 的 功能 ， 当 用 户 在 某 个 文本 框 中 输入 无 效 数据 后 单 击 “ 保 存 ” 
按钮 时 ， 页 面 上 自动 显示 错误 提示 信息 ， 阻 止 表单 向 服务 器 端 提 交 。 如 何 提交 数据 到 服务 器 
端 将 在 后 面 的 章节 介绍 。 

用 户 选 择 的 图 像 文 件 的 尺寸 可 能 和 网 站 要 求 的 缩 略图 的 尺寸 不 一 样 ， 个 人 头像 功能 需要 
根据 用 户 选 择 的 图 像 文 件 生成 缩 略 图 ， 生 成 缩 略 图 的 具体 细节 以 后 再 实现 ， 只 要 知道 将 图 像 
文件 上 传 到 服务 器 后 ， 在 服务 器 端 会 生成 缩 略 图 ， 并 将 缩 略 图 的 URL 地 址 返回 给 客户 端 就 
可 以 了 , 这 里 先 把 显示 用 户 上 传 图 像 文 件 和 缩 略 图 的 位 置 预 留 好 就 可 以 了 .。 用户 可 以 单 击 “ 上 
传 ”按钮 上 传 图 像 文 件 ， 然 后 只 有 在 所 有 字段 填写 正确 后 ， 单 击 “保存 ”按钮 才 会 成 功 地 提 

3. 案例 分 析 


我 们 知道 form 元 素 的 enctype 属性 表示 在 发 送 到 服务 器 之 前 如 何 对 表单 数据 进行 编码 。 
在 包含 文件 上 传 控 件 的 表单 中 ， 该 属性 必须 设置 为 multipartform-data， 表 示 以 二 进 制 的 形式 
上 传 。 














。42 。 





但 这 样 的 
略图 ， 另 
其 属于 哪 
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在 这 里 可 以 使 用 一 个 form 表单 提交 数据 ， 后 台 服 务 器 同时 生成 缩 略 图 和 保存 表单 数据 ， 


话 ， 后 台 的 逻辑 代码 会 比较 复杂 ; 也 可 以 使 用 两 个 表单 提交 数据 ， 一 个 用 来 生成 缩 














一 个 用 来 保存 表单 数据 。 我 们 采用 第 二 种 方法 ， 使 用 <inpuf> 元 素 的 form 属性 指定 
一 个 表单 。 





该 页 面 的 所 有 控件 的 信息 如 表 1-6 所 示 。 


表 1-6_ 个 人 信息 页 面 控件 信息 








参数 名 最 大 长 度 或 最 大 值 

登录 名 
昵称 8 
缩 略 图 img 
真实 姓名 text 8 
所 在 地 select 
性 别 | 
年 上 [me io 
备用 邮箱 [ 
博客 地 址 [et 
oa 
MSN [et 
4 日 [uae | 

4. 代码 剖析 

接 下 来 我 们 看 一 下 本 案例 的 HTMLS 代码 ， 下 面 给 出 了 主要 的 代码 结构 。 


<div id="rightpart"> 


<div id="topdown"> 以 下 信息 将 显示 在 <a href="#"> 个 人 资料 页 </a>， 方 便 大 家 了 解 你 
</div> 
<!- 缩 略图 显示 区 域 -> 
<div id="div preview" > 
<img id="crop preview" src=""/> 
</div> 
<!- 登 录 名 -> 
<input id="login name" name="login name" type="text" value="" 
maxlength="8" readonly form="infoForm"/> 
<!- 上 昵称 -> 
<input id="nick name" name="nick name" type="text" value="" 
maxlength="8" required autofocus form="infoForm" maxlength="8"/> 
<!- 头 像 上 传 -> 
<div id="midleft2"> 头 像 : </div> 
<div id="uploader"> 





<form name="" id="uploadForm" method="post" 
enctype="multipart/form-data" > 
<div> 
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<input name="photo" id="file" size="27" type="file" 





accept="image/gif, image/jpeg,image/x-png" 
form="uploadForm"/> 

<input id = "upload but" name="upload but" value= 
"上 传 "type="submit" form= 





uploadForm"/> 


</div> 
</br> 
<div id="div big view" > 
<img id="big view" src="" form="infoForm"/> 
</div> 
</form> 
</div> 
<!- 真 实 姓 名 -> 


<input id="real name" name="real name" type="text" Value= 
maxlength="8" 
required form="infoForm"/> 
<!- 省 市 -> 
<select name="province" id="province" form="infoForm"></select> 
<select name="city" id="city" form="infoForm"> </select> 
<!- 性 别 -> 
<div id="midright4"> 
<input name="gender" type="radio" value="1" checked="checked" 
form="infoForm"/> 男 
<input name="gender" type="radio" value="0" form="infoForm"/> 女 
</div> 
<!- 年 龄 -> 
<input type="range" name="age" id="age" min="0" max="100" step="1" 
value="0" onchange="display age.value=this.value" 
form="infoForm"> 





<output name="display age" id="display age" for="age" 
form="infoForm"></output> 
<!- 邮 箱 -> 
<input type="email" name="email" id="email"” placeholder=" 请 输入 邮箱 地 址 " 
form="infoForm"> 
<!- 生 日 -> 
<input type="date" name="birthday" form="infoForm"/> 
<!- 博 客 -> 
<input name="blog" type="text" value="" form="infoForm"/> 
<!-Q0-> 
<input name="qq" type="number" value="" form="infoForm"/> 
< -MSN=> 
<input name="msn" type="text" value="" form="infoForm"/> 
RE 提交 数据 infoForm -一 -一 一 一 > 
<form method="post" enctype="multipart/form-data" name="infoForm" 
id="infoForm"> 
<button type="submit" name="send" id="send" value=""><span> 保 存 
</span></button> 





</form> 
</div> 


首先 增加 了 上 传 图 像 文件 的 form 区 域 和 缩 略 图 预览 区 域 ， 又 为 每 个 <input> 元 素 指 定 了 
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正确 类 型 ， 设 置 昵称 为 必 输 字段 和 自动 得 到 焦点 ， 最 后 增加 了 提交 数据 的 form 区 域 。 在 
HIML5 中 ， 我 们 不 必 把 所 有 输入 元 素 放置 于 打开 和 关闭 的 <form> 元 素 中 。 我 们 可 以 将 表单 
放置 于 任何 我 们 愿意 放置 的 位 置 ， 设 置 输入 元 素 的 form 属性 为 表单 的 DD， 这 样 输入 元 素 就 
可 以 和 一 个 表单 关联 了 。 比 如 : 


<input name="qq" type="number" value="" form="infoForm"/> 





本 章 小 结 


本 章 讨论 了 HTMLS5 规范 的 历史 和 HTMLS5 的 重要 特性 ， 介 绍 了 规范 到 底 包括 什么 ， 不 
包括 什么 ， 比 如 新 的 doctype 和 字符 集 声明 ， 许 多 新 的 语义 化 标记 元 素 。 学 习 了 Web 页 面 的 
内 容 是 使 用 描述 文档 结构 的 元 素 进行 标记 的 ， 包 括 HIMLS 新 增 的 页 眉 、 页 脚 、 内 容 区 块 等 
主体 结构 元 素 和 表示 录 辑 结构 或 附加 信息 的 非 主 体 结构 元 素 。 

HTMLS5 规定 了 <audio> 和 <video> 元 素 包含 音频 和 视频 的 标准 方法 , 还 演示 了 如 何 使 用 它 
们 构建 引 人 注 目的 Web 应 用 。<audio> 元 素 和 <video> 元 素 的 引入 ， 让 HTML5 应 用 在 对 媒体 
的 使 用 上 多 了 一 种 选择 : 不 用 插件 即 可 播放 音频 和 视频 。 此 外 ，<audio> 元 素 和 <video> 元 素 
还 提供 了 通用 的 、 集 成 化 的 、 可 用 脚本 控制 的 API。 

Google 提出 了 一 项 计划 来 推进 HTMLS5 默认 取代 Flash。Google 计划 在 2016 年 第 4 季度 ， 
只 允许 10 个 域名 默认 支持 Flash， 其 他 域名 默认 显示 HIML5。 如 果 依然 要 使 用 Flash， 浏 览 
器 将 询问 用 户 是 否 允许 运行 Flash 插件 。 

由 于 有 的 元 素 只 有 少 部 分 浏览 器 支持 或 者 使 用 率 极 低 等 原因 , HTMLS5 废除 了 一 些 元 素 ， 
有 的 元 素 给 出 了 可 替代 的 元 素 。 表 1-7 给 出 了 详细 内 容 。 





表 1-7_ 废除 的 元 素 














废除 的 元 素 蔡 代 方案 
frameset、frame、noframes | 使 用 iame 或 Ajax 技术 
center、 font、s、strike、tt、 
、 使 用 CSS 替代 的 元 素 
uu、 basefont、big、 
也 使 用 ruby 元 素 替代 
dir 使 用 忆 元 素 替 代 





在 使 用 HIMLS 新 的 输入 元 素 创 建 了 一 个 表单 之 后 ， 还 应 该 确保 每 个 元 素 都 设置 了 恰当 
的 类 型 ， 以 便 让 用 户 了 解 应 该 填写 何 种 信息 或 者 应 该 做 何 种 选择 。 一 方面 给 用 户 带 来 了 一 些 
新 的 体验 ， 另 一 方面 减少 了 程序 开发 的 时 间 。 

HTML5 Web Forms 是 对 目前 Web 表单 的 全 面 提升 ， 它 保持 了 简便 易 用 的 特性 。 通 过 书 
中 的 表单 示例 ， 我 们 可 以 很 快 掌握 表单 的 新 特性 ， 当 然 有 些 新 的 表单 属性 还 有 待 挖掘 。 在 熟 
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练 掌握 新 属性 后 ， 我 们 可 以 关注 如 何 提升 用 户 操作 体验 。 

2016 年 4 月 20 日 , 微 信 发 布 消息 称 安 卓 版 客户 端 WebView 即日 起 100% 放 量 , 全面 升 
级 至 X5 Blink 内 核 。X5 Blink 内 核对 HTML5 和 CSS3 有 着 更 好 的 支持 、 更 强大 的 泻 染 能 力 ， 
目前 腾讯 的 应 用 ， 诸 如 微 信 、 手 机 QQ 等 均 已 通过 进行 X5 Blink 内 核 过 渡 。X5 Blink 内 核 将 
会 为 开发 者 提供 更 好 的 网 页 支持 ， 对 诸如 动画 、 音 视频 、Touch 事件 、 滚 动 等 的 支持 性 会 更 
好 。 对 于 微 信用 户 来 说 ， 以 后 将 会 看 到 更 多 拥有 各 式 各 样 功能 的 网 页 或 小 游戏 等 ， 用 户 的 浏 
览 体验 也 会 更 进一步 。 配 合 TBS 2.0( 腾 讯 浏 览 服务 ) 的 发 布 , 新 版 微 信 开发 者 工具 也 随 之 发 布 ， 
完善 开发 者 远程 调试 能 力 ， 为 广大 前 端 开发 者 开发 Web App 提供 更 多 可 能 和 便利 。 


本 章 练 习 


. 如 何 区 分 HTML 和 HIML5? 

. HIMLS 的 页 面 结构 与 HIML4 或 更 早 的 HTML 相 比 有 什么 区 别 ? 
. HIMLS 中 的 datalist 是 什么 ? 

. 如 何在 HIMLS 页 面 中 嵌入 音频 和 视频 ? 

HTML5 表单 新 增加 的 元 素 有 哪些 ? 

. HTMLS 表单 如 何 兼容 低 版 本 浏览 器 ? 

. 如 何在 email 文本 框 中 输入 多 个 email 地 址 ? 
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第 2 章 CSS3 和 BootStrap 


我 们 看 到 许多 网 站 都 非常 漂亮 ， 这 是 因为 这 些 网 站 使 用 了 CSS3 的 新 特性 以 及 类 似 
BootStrap 的 响应 式 UI 框架。 


本 章 内 容 : 
e@ 掌握 CSS3 特效 
@ 掌握 BootStrap 基础 知识 


2.1 CSS3 简介 


CSS3 是 对 CSS2.1 的 扩展 , 并 且 完 全 向 后 兼容 , 它 带 来 了 让 开发 人 员 期 望 已 久 的 新 特性 ， 
包括 圆 角 边框 、 边 框 阴影 、 过 渡 效 果 和 动画 效果 。 

从 2002 年 到 2011 年 ,CSS2 的 发 布 用 了 9 年 时 间 , 而 CSS3 为 了 在 规范 化 的 进程 中 走 得 
更 快 ， 采 取 了 一 种 模块 化 的 方式 进行 规范 的 设计 ， 不 同 的 模块 增强 了 之 前 版 本 规范 中 所 引入 
的 功能 。 每 个 模块 在 W3C 中 会 进行 分 级 ， 比 如 “提案 建议 ”、“ 候 选 建 议 ”、“ 建 议 ”等 ， 
只 有 符合 官方 的 一 定 标准 ， 才 被 称 为 成 熟 的 CSS3 模块 。 

本 章 会 以 小 案例 的 形式 介绍 CSS3 的 相关 技术 点 。 


2.1.1 CSS3 边框 
假设 要 实现 图 2-1 所 示 的 边框 效果 。 








图 2-1 边框 效果 


我 们 看 到 矩形 框 的 4 个 角 是 圆 角 的 ， 还 有 边框 阴影 。 在 CSS3 之 前 ， 实 现 此 效果 难度 较 
大 ， 十 分 复杂 ， 但 在 有 了 CSS3 之 后 ， 实 现 起 来 就 很 简单 。 

border-radius 属性 就 能 实现 圆 角 边框 ，box-shadow 属性 就 能 实现 边框 阴影 。 具 体 实现 代 
码 如 下 : 
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<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title> CSS3 Corners 案例 </title> 
<style type="text/css"> 
.box { 
width: 300px; 
height: 150px; 
background: #ffb6cl1; 
border: 2px solid #f£08080; 
border-radius: 20px; 
box-shadow: 15px 15px Spx #888245; 
} 
</style> 
</head> 
<body> 
<div class="box"></div> 
</body> 
</html> 


2.1.2 CSS3 多 列 


在 CSS3 中 如 何 实现 多 列 布局 呢 ? 比如 报纸 布局 (参见 图 2-2)。 


Bootstrap 是 一 个 开发 者 能 够 快速 编 最 受 欢迎 的 
开源 ， 由 Twitter 写 出 可 适应 不 同 设 HITIL、CSS 和 JS 
创建 的 用 于 开发 可 备 尺寸 框架 ， 用 于 开发 响 


靠 移动 网 页 的 框 序 ， 并 包含 了 应 式 布局 、 移 动 设 
架 。Bootstrap 有 常 | 备 优先 的 WEB 项 
一 组 标准 类 ， 使 得 话 框 是 目 。 





图 2-2 报纸 布局 


:完成 图 2-2 所 示 布 局 前 , 需要 掌握 一 些 预备 知识 。 CSS3 中 关于 多 列 的 属性 主要 有 如 下 


三 个 : 
e column-count: 指定 元 素 的 列 数 
e@ column-rule: 指定 列 之 间 的 差距 
e column-gap: 设置 列 之 间 的 宽度 、 样 式 和 颜色 
读者 可 以 尝试 完成 这 个 案例 ， 在 这 里 给 出 实现 代码 : 


<!DOCTYPE html> 

<html lang="en"> 

<head> 

<meta charset="UTF-8"> 

<title>Example of Setting CSS3 Column Rules</title> 

<style type="text/css"> 

pi 

/* Chrome, Safari, Opera */ 
-webkit-column-count: 3; 
-webkit-column-gap: 100px; 
-webkit-column-rule: 2px solid red; 
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/* Firefox */ 
—moz-column-count: 3; 
-moz-column-gap: 100px; 
-moz-column-rule: 2px solid red; 
/* Standard syntax */ 
column-count: 3; 
column-gap: 100px; 
column-rule: 2px solid red; 
} 
</style> 
</head> 
<body> 
<p>BootStrap 是 一 个 开源 , 由 Twitter 创建 的 用 于 开发 可 靠 移动 网 页 的 框架 。 Bootstrap 有 
-组 标准 类 ， 使 得 开发 者 能 够 快速 编写 出 可 适应 不 同 设备 尺寸 的 应 用 程序 ， 并 包含 了 一 些 常用 组 件 ， 诸 如 对 
话 框 和 确认 框 ， 是 最 受 欢迎 的 HTML、CSS 和 JS 框架 ， 用 于 开发 响应 式 布局 、 移 动 设备 优先 的 WEB 项 目 。 
</p> 
</body> 


</html> 
2.1.3 CSS3 Box-Sizing 





默认 情况 下 ， 元 素 泻 染 时 的 尺寸 取决 于 宽度 、 高 度 、 边 框 和 边 距 。 比 如 ， 你 对 一 个 100% 
宽度 的 div 元 素 使 用 padding 和 border 属性 的 话 ， 水 平 的 滚动 条 就 会 出 现 ， 例 如 : 
-box { 
width: 100%; 
padding: 20px; 
border: 5px solid #f£08080; 
} 


这 是 前 端 开发 者 经 常 遇见 的 问题 ，CSS3 中 使 用 box-sizing 解决 了 这 个 问题 ,使 得 布局 更 
加 简单 和 自然 。box-sizing 属性 值 如 表 2-1 所 示 。 


表 2-1 box-sizing 属性 值 








值 描 ” 述 
这 是 由 CSS2.1 规定 的 宽度 及 高 度 行为 
content-box 宽度 和 高 度 分 别 应 用 到 元 素 的 内 容 框 
在 宽度 和 高 度 之 外 绘制 元 素 的 内 边 距 和 边框 
为 元 素 设 定 的 宽度 和 高 度 决 定 了 元 素 的 边框 盒 。 也 就 是 说 ， 为 元 素 指定 的 
border-box 任何 内 边 距 和 边框 都 将 在 已 设 定 的 宽度 和 高 度 内 进行 绘制 。 通 过 从 已 设 定 


的 宽度 和 高 度 分 别 减 去 边框 和 内 边 距 才能 得 到 内 容 的 宽度 和 高 度 
规定 应 从 父 元 素 继承 box-sizing 属性 值 








inherit 


2.1.4 CSS3 背景 
CSS3 中 的 background-image 属性 允许 我 们 为 背景 设置 多 张 图 片 ， 应 该 确保 图 片 有 一 定 
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的 透明 度 才能 看 出 多 张 图 片 的 效果 。 例 如 ， 假 设 有 图 2-3 和 图 2-4 所 示 的 两 张 背景 图 。 











图 2-3 背景 图 1 图 2-4 背景 图 2 


在 网 页 中 使 用 如 下 样式 代码 : 

body { 
background-image:url ("img tree.gif"),url("img flwr.gif"); 
background-color: "#cccccc"; 


} 
运行 效果 如 图 2-5 所 示 。 





图 2-5 CSS3 多 背景 的 运行 效果 


对 于 背景 图 片 的 设置 还 有 另 一 个 有 用 的 属性 一 background-size 属性 规定 背景 图 片 的 
尺寸 ， 我 们 可 以 使 用 数字 、 百 分 比 、 内 置 字符 串 选 项 来 设置 background-size 的 值 。 具 体 如 
表 2-2 所 示 。 
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表 2-2 background-size 属性 值 








值 描 ” 述 
i 设置 背景 图 像 的 高 度 和 宽度 。 第 一 个 值 设置 宽度 ， 第 二 个 值 设置 高 度 。 
lL 如 果 只 设置 一 个 值 ， 第 二 个 值 会 被 设置 为 auto 
以 父 元 素 的 百分比 来 设置 背景 图 像 的 宽度 和 高 度 。 第 一 个 值 设置 宽度 ， 
ta 
i 第 二 个 值 设置 高 度 。 如 果 只 设置 一 个 值 ， 第 二 个 值 会 被 设置 为 auto 
把 背景 图 像 扩 展 至 足够 大 ， 以 使 背景 图 像 完全 履 盖 背景 区 域 。 背 景 图 像 
es 的 某 些 部 分 也 许 无 法 显示 在 背景 定位 区 域 
i 把 背景 图 像 扩展 至 最 大 尺寸 ， 以 使 其 宽度 和 高 度 完全 适应 内 容 区 域 
例如 : 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>CSss3</title> 
<style type="text/css"> 
block { 


width:450px; 
height: 450px; 
background-color: "#cccccc"; 
} 
#divl { 
background-image: url("../_assets/img/phone onex.png"); 
background-size: cover; 
background-repeat :no-repeat; 
float: left; 
} 
#div2 { 
background-image: url("../_assets/img/phone onex.png"); 
background-size: contain; 
background-repeat :no-repeat; 
float: left; 
} 
</style> 
</head> 
<body> 
<div id="divl" class="block"></div> 
<div id="div2" class="block"></div> 
<script> 
</script> 
</body> 
</html> 


运行 效果 如 图 2-6 所 示 。 
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图 2-6 background-size 的 运行 效果 


2.1.5 CSS3 2D 转换 


CSS3 的 2D 转换 功能 能 够 改变 元 素 的 形状 、 尺 寸 和 位 置 ， 因 此 我 们 能 够 使 用 CSS3 制作 
出 对 元 素 进行 移动 、 缩 放 、 转 动 、 拉 伸 的 效果 ， 再 结合 jQuery 的 动画 特效 就 能 做 出 意 想 不 到 
的 效果 。2D 变形 模块 引入 了 新 的 transform 属性 ， 它 允许 对 盒子 进行 旋转 、 平 移 以 及 缩放 而 
不 会 改变 其 在 文档 流 中 的 位 置 。 下 面 我 们 来 一 一 学 习 这 个 属性 的 常用 方法 。 

通过 translate 方法 将 元 素 上 /下 、 左 / 右 移动 ， 基 于 translate 方法 的 还 有 translateX 和 
translateY 方法 ， 例 如 : 


<button id = "trans"> 移 动 </button> 

.translate { 
color: #009999; 
border: #009999; 
-webkit-transform: translate (200px, 200px); 
-moz-transform: translate(200px, 200px); 
-ms-transform: translate(200px, 200px); 
-o-transform: translate(200px, 200px); 
transform: translate (200px, 200px); 

} 

<script> 

$('#trans') .click(function(event) { 
$ (this) .addClass('translate'); 

}); 

</script> 


由 于 有 的 浏览 器 并 不 支持 所 有 的 变换 效果 ， 因 此 我 们 使 用 了 带 浏览 器 前 绥 的 transform 属性 
以 兼容 各 个 浏览 器 , IE9、Firefox 和 Opera 分 别 对 应 -ms-transform、-moz-transform 和 -o-transform， 
Safari 和 Chrome 对 应 -webkit-transform， 一 般 使 用 -webkit-transform 和 -moz-transform 就 可 以 
了 。 注意 我 们 把 不 带 前 绥 的 transform 放 在 最 后 ， 这 是 因为 如 果 有 浏览 器 支持 transform 属性 ， 
就 能 够 优先 使 用 不 带 前 绥 的 transform 属性 进行 处 理 。 
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上 述 代码 的 运行 效果 如 图 2-7 所 示 。 
rotate 方法 可 以 围绕 XX 轴 或 Y 轴 进 行 旋转 ， 并 指定 角度 值 。 例 如 : 


<button class="rotate"> 旋 转 </button> 
.rotate:hovert{ 
-webkit-transform: rotate(90deg); 
-moz-transform: rotate(90deg); 
transform: rotate(90deg); 


} 


运行 效果 如 图 2-8 所 示 。 


CSS3 Buttons 


CSS3 Buttons 





可 


图 2-7 移动 效果 图 2-8 旋转 效果 


scale 方法 对 元 素 进行 缩放 , 该 属性 以 1 的 倍数 进行 指定 , scale(2) 告 知 浏览 器 将 元 素 放大 


至 两 倍 大 小 。 基 于 此 方法 的 还 有 scaleX 和 scaleY 方法 。 例 如 : 


<button class="boom"> 放 大 </button> 
.boom:hovert{ 
color: #009999; 
border: #009999; 
-webkit-transform: scale(2, 2); 
-moz-transform: scale(2, 2); 
transform: scale(2, 2); 


} 


运行 效果 如 图 2-9 所 示 。 


skew 方法 将 元 素 翻转 给 定 的 角度 ，skew(30deg,10deg) 围 绕 X 轴 把 元 素 翻 转 30 度 ， 


立轴 翻转 10 度 。 例 如 : 


<button class="deform"> 变 形 </button> 
.deform:hover{ 
—webkit-transform: skew(15deg,15deg) 
-moz-transform: skew(l5deg,15deg); 
transform: skew(l5deg,15deg); 
} 


运行 效果 如 图 2-10 所 示 。 


围绕 
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CSS3 Buttons 


时 图 
回忆 


图 2-9 缩放 效果 图 2-10 变形 效果 





2.1.6 CSS3 过 渡 


通过 CSS3 过 渡 ， 我 们 可 以 在 不 使 用 Flash 动画 或 JavaScript 的 情况 下 ， 在 元 素 从 一 种 
样式 变换 为 男 一 种 样式 时 为 元 素 添加 效果 。 在 引入 CSS 动画 之 前 , 由 于 实现 动画 的 JavaScript 
章 令 不 尽 相 同 ， 浏 览 器 无 法 优化 其 正在 执行 的 JavaScript 指令 ， 以 得 到 对 人 眼 更 平滑 的 动画 

想 为 元 素 赋 予 动画 ， 需 要 指定 动画 、 时 间 以 及 动画 过 程 中 变动 的 单位 等 属性 。CSS3 必 
须 指定 两 项 内 容 : 指定 希望 把 效果 添加 到 哪个 CSS 属性 和 指定 效果 的 时 长 。 当 我 们 改变 指定 
的 CSS 属性 时 ， 就 会 得 到 动画 效果 。 例 如 : 

div 

{ 


transition: width 3s; 





-moz-transition: width 3s; /* Firefox 4 */ 
-webkit-transition: width 3s; /* Safari 和 Chrome */ 
-o-transition: width 3s; /* Opera */ 


} 

上 面 的 代码 给 出 了 应 用 于 width 属性 的 过 渡 效 果 ， 时 长 为 3 秒 。 如 果 要 添加 多 个 属性 ， 
需要 由 逗号 阳 开 。 例 如 : 

transition: width 3s, height 3s; 

也 可 以 对 所 有 属性 赋予 动画 效果 ， 例 如 : 


transition: all 3s; 


我 们 还 可 以 单独 指定 CSS3 的 过 渡 属 性 ， 如 表 2-3 所 示 。 





表 2-3 过 渡 属 性 








属 性 描述 
transition- 应 用 过 渡 的 CSS 属性 的 名 称 
transition-duration 过 渡 效 果 的 时 间 ， 默 认 是 0 
人 过 渡 效 果 的 时 间 曲 线 ， 默 认 是 ease， 包 括 ease、ease-in 、ease-out、 


ease-in-out、cubic-bezier 








transition-delay 过 渡 效 果 的 延迟 执行 时 间 ， 默 认 是 0 
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transition-property: width; 
transition-duration: 3s; 
transition-timing-function: linear; 
transition-delay: 2s; 


} 
对 于 上 一 节 中 2D 变换 的 例子 ， 我 们 可 以 添加 过 渡 效 果 ， 并 可 以 组 合 使 用 多 个 2D 变换 
以 得 到 想 要 的 效果 。 例 如 : 


<!DOCTYPE html> 


<html> 

<head> 

<meta charset="utf-8" /> 
<title>CSss3</title> 


<style type="text/css"> 
#containert{ 
width: 330px; 
margin: 25px auto; 
} 
button{ 
width: 100px; 
height: 100px; 
color: #ffffff; 
background-color: #3498db; 
font-family:Open Sans Condensed; 
text-decoration: none; 
font-size: 1.8em; 
border: 2px #ffffff solid; 
margin: 10pPx 0 0 Spx; 
// 设 置 过 渡 效 果 
-webkit-transition: all 0.5s; 
-moz-transition: all 0.5s; 
transition: all 0.5s; 


/* 魔 力 从 这 里 开始 */ 
button:hovert{ 


cursor: pointer; 


.highlight:hovert{ 
background-color: #FFffff; 
color: #3498db; 





.fade:hover{ 


border: Opx; 
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color: #009999; 


opacity: 


. 


07 


.boom:hover{ 
color: #009999; 


border: 


opacity: 
—webkit— 


#009999; 
0; 
transform: scale(2, 2); 


-moz-transform: scale(2, 2); 


transform: scale(2, 2); 


} 


-focus:hovert{ 
border-width: 20px; 


} 


.rotate:hover{ 


—webkit— 


transform: rotate(90deg); 


-moz-transform: rotate(90deg); 


transform: rotate(90deg); 


} 


.knit:hovert{ 


height: 
} 


Opx; 


.shrink:hovert{ 


-webkit— 


transform: scale(0.0,0.0); 


-moz-transform: scale(0.0,0.0); 


transform: scale(0.0,0.0); 


} 


.Squezze:hovert{ 


-webkit-transform: scale(1.5, 0.0); 


-moz-transform: scale(1.5, 0.0); 


transform: scale(1.5, 0.0); 


} 


.deform:hover{ 


-webkit- 


transform: skew(45deg,45deg); 


-moz-transform: skew(45deg,45deg); 


transform: skew(45deg,45deg); 


} 
</style> 
</head> 
<body> 


<div id="container"> 
<h1>CSS3 Animated Buttons</h1> 


<button 
<button 
<button 
<button 
<button 


class="highlight"> 高 亮 </button> 
class="fade"> 淡 出 </button> 
class="boom"> 放 大 </button> 
class="focus"> 聚 焦 </button> 
class="rotate"> 旋 转 </button> 
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<button class="knit"> 展 开 </button> 
<button class="shrink"> 收 缩 </button> 
<button class="squezze"> 挤 压 </button> 
<button class="deform"> 变 形 </button> 

</div> 

<script> 

</script> 

</body> 

</html> 


2.1.7 CSS3 动画 


动画 由 一 系列 关键 帧 key frames) 组 成 ， 在 CSS3 中 我 们 也 可 以 创建 多 个 关键 帧 ，CSS3 
使 用 @keyframes 指令 创建 动画 效果 。 在 @keyframes 中 规定 某 项 CSS 样式 ， 就 能 创建 由 当前 
样式 逐渐 改 为 新 样式 的 动画 效果 。 例 如 : 





@keyframes mymove { 
0% {top: Opx;} 
25% {top: 200px;} 
75% {top: S50px} 
100% {top: 100px;} 


在 上 面 的 代码 中 , 我 们 可 以 使 用 from 替换 0%, 使 用 to 替换 100%, 动画 效果 是 一 样 的 。 
只 有 把 动画 应 用 到 某 个 元 素 时 才 会 产生 动画 效果 。 我 们 至 少 需 要 指定 动画 的 名 称 和 时 间 。 
例如 : 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>Css3</title> 
<style> 
div { 
width: 100px; 
height: 100px; 
background: red; 
position: relative; 
-webkit-animation: mymove 3s infinite; /* Chrome, Safari, Opera */ 
animation: mymove 3s infinite; 
} 
/* Chrome, Safari, Opera */ 
Q@-webkit-keyframes mymove { 
0% {top: Opx;} 
25% {top: 200px;} 
75% {top: S50Opx} 
100% {top: 100px;} 
} 


Q-moz-keyframes mymove { 
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0% {top: Opx;} 
25% {top: 200px; 
75% {top: 50px} 
100% {top: 100px; 


} 

/* 标准 语法 */ 

Qkeyframes mymove { 
0% ED WW; 
25% {top: 200px; 
75% {top: 50px} 
100% {top: 100px; 


} 

</style> 
</head> 
<body> 
<div></div> 
</body> 
</html> 


上 面 的 代码 运行 后 ，div 元 素 会 执行 动画 效果 ，div 元 素 的 高 度 会 在 第 1 秒 滑动 到 200 像 
素 位 置 , 在 第 2 秒 滑动 到 50 像素 位 置 , 在 第 3 秒 滑动 到 100 像素 位 置 。 我们 还 可 以 指定 其 他 
的 动画 属性 ， 如 表 2-4 所 示 。 


表 2-4 动画 属性 
属 性 描述 
animation-name 规定 @keyframes 动画 的 名 称 
animation-duration 规定 动画 完成 一 个 周期 所 花费 的 时 间 ( 单 位 为 秒 或 毫秒 ， 默 认 是 0 
animation-timing-function 规定 动画 的 速度 曲线 ， 默 认 是 ease 
animation-dela 规定 动画 何 时 开始 ， 默 认 是 0 
animation-iteration-count 规定 动画 被 播放 的 次 数 ， 默 认 是 1 
ee 规定 动画 是 否 在 下 一 周期 逆向 播放 ， 默 认 是 normal。alemate 值 表示 动画 
应 该 轮流 反 向 播放 
animation-play-state 规定 动画 是 否 正 在 运行 或 暂停 ， 默 认 是 running 


2.2 less 简介 


CSS 作为 一 门 标记 语言 , 语法 相对 简单 , 对 使 用 者 的 要 求 较 低 , 但 同时 也 带 来 一 些 问题 : 
CSS 需要 书写 大 量 看 似 没有 迪 辑 的 代码 ， 不 方便 维护 及 扩展 ， 不 利于 复 用 ， 尤 其 对 于 非 前 端 
开发 工程 师 来 讲 ， 往 往 会 因为 缺少 CSS 编写 经 验 而 很 难 写 出 组 织 良好 且 易 于 维护 的 CSS 
代码 ， 造 成 这 些 困 难 的 很 大 原因 源 于 CSS 是 一 门 非 程序 式 语言 ， 没 有 变量 、 函 数 、 作 用 域 
等 概念 。 于 是 就 出 现 了 CSS 预 处 理 技术 ， 通 俗 来 说 ，CSS 预 处 理 器 用 一 种 专门 的 编程 语言 ， 
先进 行 Web 页 面 样式 设计 ， 然 后 编译 成 正常 的 CSS 文件 ， 以 供 项 目 使 用 。 同 时 也 涌现 出 了 
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很 多 种 不 同 的 CSS 预 处 理 器 语言 ， 比 如 Sass(SCSS)、less 等 。 这 里 我 们 以 less 为 例 。 
下 面 我 们 看 一 个 less 的 简单 例子 (styles.less 代码 ): 


@color: #4D926F; 
h2 { 
background-color: @color; 


经 过 编译 生成 的 CSS 文件 如 下 : 


h2 { 
background-color: #4D926F; 
} 


2.2.1 在 客户 端 使 用 less 


我 们 可 以 直接 在 客户 端 使 用 .less 文件 (less 源 文件 ), 只 需要 从 http://lesscss.org 下 载 lessjjs 
文件 或 者 使 用 CDN 上 的 lessjs， 并 且 在 引用 less 文件 之 后 引用 lessjs 文件 ， 例 如 : 


<!DOCTYPE html> 
<html> 
<head lang="en"> 
<meta charset="UTF-8"> 
<title>less</title> 
<link rel="stylesheet/less" type="text/css" href="styles.less"> 
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.6.1/less.min.js"> 
</script> 
</head> 
<body> 

<header> 

<h1> 前 端 开发 必 备 </h1> 

</header> 

<h2>less 教程 </h2> 
</body> 
</html> 


运行 上 面 的 代码 ， 效 果 如 图 2-11 所 示 。 
C | localhost:63342/2016-htmls/less-test.html 


图 2-11 第 一 个 less 例子 


注意 : 要 把 代码 部 署 到 Tomcat 服务 器 上 才能 正确 显示 ， 不 然 会 出 现 XMLHttpRequest 
cannot load 错误 。 建 议 使 用 IntelliJ IDEA 14.0.3 创建 Static Web 项 目 ， 如 图 2-12 所 示 。 
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@ Java Enterprise 
向 Android 

井 J2ME 
Clouds 


© HTMLS Boilerplate 
@ Web Starter Kit 
@ Foundation 


© Twitter Bootstrap 


可 Spring 


GJava FX 

# Intellij Platform Pluc 
m Maven 

@ Gradle 

Groovy 

© Griffon 

© Grails 


图 2-12 使 用 IntelliJIDEA 创建 Static Web 项 目 














右 击 代码 区 域 ， 可 以 在 浏览 器 中 查看 页 面 ， 如 图 2-13 所 示 。 





tm 


《head lang="en”> Ee 
‘<meta charset="UTF-8”> 折 酸 (G) 
《title>less</title> 转 到 (G) » 
<link rel=“stylesheet/le| 生成 (G). Alt+Insert Iles. less”> 


<script src="//cdnis. ¢l9® Seve "less-test.html' /2. 6. 1/less.n 









</head> b Run'less-test.html’ Ctrl+Shift+F10 
枉 Debug “less-test.html" 
cbody> 四 Boca | 
《<h2>》less 教 程 《/h2> 本 地 历史 (H) je Chrome 
</body> 与 前 贴 板 比较 (B) ® Firefox 
图 Safari 
/html> Send Code Pointer 


OQ Opera 
* @ Intemet Explorer 











Show Diff With User 
图 2-13 选择 在 浏览 器 中 查看 页 面 


下 面 我 们 学 习 一 些 基 础 用 法 ， 更 多 用 法 可 以 查看 官方 教程 。 
2.2.2 混合 

混合 可 以 将 一 个 定义 好 的 class A 轻松 引入 到 另 一 个 class B 中 ， 从 而 简单 实现 class B 继 
承 class A 中 的 所 有 属性 。 我 们 还 可 以 带 参 数 地 进行 调用 ， 就 像 使 用 函数 一 样 。 


.rounded-corners (radius: 5px) { 
border-radius: @radius; 


-webkit-border-radius: @radius; 
-moz-border-radius: @radius; 

3 

header { 


-rounded-corners; 
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footer { 
.rounded-corners (10px); 

} 

/* 生成 的 CSS */ 

header { 
border-radius: 5S5px; 
—webkit-border-radius: Spx; 
-moz-borqder-radius: 5px; 

8 

footer { 
border-radius: 10px; 
-webkit-border-radius: 10px; 
-moz-border-radius: 10px; 


2.2.3 ” 赃 套 规则 


我 们 可 以 在 一 个 选择 器 中 嵌 套 另 一 个 选择 器 来 实现 继承 ， 这 在 很 大 程度 上 减少 了 代码 
量 ， 并 且 代码 看 起 来 更 加 清晰 。 


header { 

hl { 
font-size: 26px; 
font-weight: bold; 

} 

p { font-size: 12px; 
a { text-decoration: none; 

&:hover { border-width: lpx } 


} 

jx 生成 的 Css */ 

header hl { 
font-size: 26px; 
font-weight: bold; 


header p { 
font-size: 12px; 


header P a { 
text-decoration: none; 


header p a:hover { 
border-width: lpx; 
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2.2.4 函数 & 运 算 


运算 提供 了 加 、 减 、 乘 、 除 操作 ; 我 们 可 以 做 属性 值 和 颜色 的 运算 ， 这 样 就 可 以 实现 属 
性 值 之 间 的 复杂 关系 。less 中 的 函数 一 一 映射 了 JavaScript 代码 ， 如 果 愿 意 的 话 可 以 操作 属 
性 值 。 

/* less */ 

@the-border: lpx; 


@base-color: #111; 
Qred: #842210; 





header { 
color: @base-color * 3; 
border-left: @the-border; 
border-right: @the-border * 2; 
} 
footer { 
color: @base-color + #003300; 
border-color: desaturate(@red, 10%); 
} 
/* 生成 的 CSS */ 
header { 
color: #333; 
border-left: lpx; 
border-right: 2px; 
} 
footer { 
color: #114411; 
border-color: #7d2717; 
} 


除了 在 客户 端 使 用 less， 在 服务 器 端 也 可 以 使 用 less。less 在 服务 器 端的 使 用 主要 是 借助 
于 less 的 编译 器 ， 将 less 源 文件 编译 生成 最 终 的 CSS 文件 。 目 前 常用 的 方式 是 利用 node 的 
包 管理 器 (npm) 安 装 less， 安 装 成 功 后 就 可 以 在 node 环境 中 对 less 源 文件 进行 编译 。 推 荐 的 
做 法 是 将 less 文件 编译 生成 静态 CSS 文件 ， 然 后 在 HTML 文档 中 使 用 。 


2.3 ”BootStrap 简介 


BootStrap 是 Twitter 推出 的 一 个 开源 的 用 于 前 端 开发 的 工具 包 。 它 由 Twitter 的 设计 师 
Mark Otto 和 Jacob Thomton 合作 开发 ， 是 一 个 CSS/HTML 框架 。BootStrap 提供 了 优雅 的 
HTML 和 CSS 规范 ， 由 动态 CSS 语言 less 写成 。BootStrap 一 经 推出 就 颇 受 欢迎 。 

我 们 可 以 从 bootcss.com 下 载 BootStrap， 也 可 以 应 用 CDN 上 的 文件 。 

















第 2 章 CSS3 和 了 BootStrap 








任务 一 : 下 载 BootStrap 并 查看 其 目录 结构 


分 别 下 载 BootStrap 源码 包 ， 以 及 编译 后 的 用 于 生产 环境 的 压缩 包 , 然后 查看 其 目录 结构 。 
任务 总 结 : 
BootStrap 源码 包 的 目录 结构 如 图 2-14 所 示 。 





bootstrap/ 
[一 less/ 
mm 7 

[一 fonts/ 


FF dist/ 


css/ 
ds/ 

[一 fonts/ 
[一 docs/ 

[一 examples/ 








图 2-14 ”BootStrap 源码 包 的 目录 结构 
编译 后 的 代码 目录 结构 如 图 2-15 所 示 。 


bootstrap/ 

[一 css/ 

| bootstrap.css 

| bootstrap.css.map 

| bootstrap.min.css 

FF bootstrap-theme.css 

FF bootstrap-theme.css.map 

[一 bootstrap-theme.min.css 

da 

| bootstrap.js 

[一 bootstrap.min.js 

[一 fonts/ 
FF glyphicons-halflings-regular.eot 
FE glyphicons-halflings-regular.svg 
|— glyphicons-halflings-regular.ttf 
| glyphicons-halflings-regular.woff 
[一 glyphicons-halflings-regular.woff2 











图 2-15 编译 效果 


任务 二 : 个 人 简历 的 制作 


任务 需求 描述 : 


在 北京 ， 平 均一 个 职位 会 收 到 1000 封 求职 信 ， 其 中 200 封 是 合格 的 。 据 某 网 站 统计 ， 
规模 较 大 的 企业 一 般 每 周 要 接收 500 份 至 1000 份 电子 简历 ， 其 中 的 80% 在 管理 者 浏览 不 到 
30 秒 后 就 被 删除 了 。 要 让 别人 在 半分 钟 内 通过 一 份 e-mail 对 你 产生 兴趣 ， 其 难度 与 跟 用 人 单 
位 直接 见面 相 比 难得 多 ， 因 此 一 份 简历 对 于 一 名 求职 者 而 言 意义 重大 。 下 面 这 个 任务 就 是 要 
制作 一 份 自己 的 HIMLS 个 人 简历 ， 如 图 2-16 所 示 。 
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名 


您 好 
我 的 名 字 是 小 明 我 是 一 个 前 端 工程 师 












关 关 于 我 得 联系 方式 
人 gat 
Sampie@omel com 
Facewecn 
Te 
# 教 育 名 经 验 # 编 程 技能 
[| 
0 二 灶 
| 
zs 说 ER 
Cm 
9 Eee 一 ee 
tT 
os pT en i 
[SS 
2015 Ovehe 旬 要 公司 和 网 [SS 
代入 了 后 向 们 人 和， 本 并 必 ， 昌 19PV S77， 代 于 0 
2010 四 有 而 页 工作， 与 了 而 用 户 和 人 六 
ov6 SINHTMLSR 才 上 
ee 
$ 
关 求 职 瘟 向 间 我 的 作品 


ma css me 人 um [| 


Ve Et PP han Pen 


远 L060TYPE Mrs 


PLL 
Vici 


国生 、 筑 信 xep7i 生 


图 2-16 个 人 简历 


任务 要 求 : 

1) 使 用 BootStrap 完成 界面 的 布局 

2) 使 用 less 优化 自 定义 的 CSS， 这 里 的 文件 名 为 styles.css 

预备 知识 : 

1) BootStrap 中 用 到 一 些 HTML 元 素 和 CSS 属性 ， 需 要 将 页 面 设置 为 HTMLS5 文档 类 
型 ， 即 ; 

<!DOCTYPE html> <html lang="zh-CN"> ... </html> 


2) 布局 容器 : BootStrap 需要 为 页 面 内 容 和 栅 格 系统 包 庄 一 个 .container 或 
container-fluid( 占 据 全 部 视 口 (view port) 的 容器 ) 容 器 。 
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<div class= 


3) 栅 格 系统 : BootStrap 提供 了 一 套 最 多 12 列 的 流 式 栅 格 系统 ， 


container™ 


和 .col-xs-4 等 表示 宽度 的 列 。 
栅 格 系统 中 的 列 通 过 指定 1 到 12 的 值 来 表示 其 跨越 的 范围 。 例 如 ， 三 个 等 宽 的 列 可 以 
使 用 三 个 .col-xs-4 来 创建 ， 具 体 如 图 2-17 所 示 。 





co 
md-1 


co 
md-1 


ol 
md-1 


cotmas 


coLmd-4 


cotmd-6 


对 应 的 代码 为 : 





md-1 


> 


通过 row 表示 行 





coL coL 


md 


co 
md-1 


co 
md-1 


coLmd-4 


co 
md-1 


coHmd.6 


图 2-17 栅 格 系统 





<div class="row"> 

<div class="col-md-1">.col-md-1</div> 
<div class="col-md-1">.col-md-1</div> 
<div class="col-md-1">.col-md-1</div> 
<div class="col-md-1">.col-md-1</div> 
<div class="col-md-1">.col-md-1</div> 
<div class="col-md-1">.col-md-1</div> 
<div class="col-md-1">.col-md-1</div> 
<div class="col-md-1">.col-md-1</div> 
<div class="col-md-1">.col-md-1</div> 
<div class="col-md-1">.col-md-1</div> 
<div class="col-md-1">.col-md-1</div> 
<div class="col-md-1">.col-md-1</div> 
</div> 

<div class="row"> 

<div class="col-md-8">.col-md-8</div> 
<div class="col-md-4">.col-md-4</div> 
<div class="row"> 

<div class="col-md-4">.col-md-4</div> 
<div class="col-md-4">.col-md-4</div> 
<div class="col-md-4">.col-md-4</div> 
</div> 


<div class= 


="row"> 


<div class="col-md-6">.col-md-6</div> 
<div class="col-md-6">.col-md-6</div> 


</div> 


</div> 


co 
md-1 


coLmd-4 


colmo4 


cor 
md-1 


co 
md-1 


co 
md-1 


BootStrap 的 栅 格 系统 可 以 在 多 种 屏幕 设备 上 工作 ， 能 通过 类 前 级 .col-xs-、.col-sm-、 


.col-md-、.col-lg- 来 标记 针对 不 同 尺 寸 屏 幕 的 列 宽度 ， 具 体 见 表 2-5。 
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表 2-5 多 屏幕 支持 参数 
超 小 屏幕 小 屏幕 中 等 屏幕 大 屏幕 
手机 (<768px) 平板 电脑 桌面 显示 器 大 桌面 显示 器 
(2768px) (2992px) (=1200px) 














栅 格 系统 行为 总 是 水 平 排列 开始 是 堆 和 在 一 起 的 ， 当 大 于 这 些 闵 值 时 将 变 为 水 平 排列 
.container 最 大 宽度 (自动 ) 1170px 
类 前 绥 .COl-xs- .Col-le- 








这 里 给 出 完成 项 目 需要 的 图 片 资源 和 CSS 样式 表 ， 项 目 结构 如 图 2-18 所 示 。 


-Cresume (F:\github\resume. 


PD.idea 
-Dcss 
LB stylecss 


中 总 js 
og- 品 scss 

一 千 style.scss 
上 四 index.html 
厂 四 index2.html 
一 引 resume.iml 








图 2-18 项 目 需要 的 图 片 资源 和 CSS 样式 表 


style.css 代码 如 下 : 


body { 
padding-bottom: 0; 
font-family: "Open Sans', Arial, Tahoma; 
color: #363636; 
background: #ededed; 
font-size: 16px; 


h2 { 
font-weight: 700; 
text-transform: uppercase; 
line-height: 1.4em; 
font-size: 1.5em; 

} 

.Primary, 

strong, 

h2 { 
color: #3b5a76; 

} 

/* 设 置 容器 */ 
-Container-main { 
background: #fff; 
margin-top: 80px; 
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padding: 0px 30px 30px 30px; 

人 

-TOW { 
margin-bottom: 20px; 

} 

header { 
min-height: 100px; 
overflow: auto; 

} 

header hl { 
margin: 0; 
padding: 20px 0 0 0; 
font-size: 2.2em; 
font-weight: 700px; 
text-transform: uppercase; 
letter-spacing: -lpx; 
text-align: center; 
line-height: 1.4em; 

} 

A/* 头像 */ 

.profile-img { 
width: 160px; 
display: block; 
margin: auto; 
margin-top: -80px; 

} 

.line { 
max-width: 100%; 

} 

/* 联系 方式 */ 

.contact-list { 
padding: 0; 
margin: 0; 

} 

Contact=1ist 1 { 
list-style: none; 
font-weight: bold; 
line-height: 3.2em; 

} 

.contact-list span { 
display: block; 
margin: 0; 
padding: 0; 
line-height: 0.1lem; 
margin-left: 37px; 
font-size: 15px; 
color: #ccc; 

} 

/* 教育 $ 经 验 */ 

.media { 
background: #ededed; 
padding: 20px; 
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} 

.work-list li { 
list-style: none; 
float: left; 
padding: 0 10px 0 10px; 
margin-bottom: 30px; 

} 

/* 页 脚 */ 

footer { 
background: #3b5a76; 
color: #fff; 
text-align: center; 
padding-top: 20px; 
padding-bottom: 20px; 


实现 步骤 : 


(1) 创建 HIMLS 页 面 ， 设 置 其 支持 在 移动 设备 浏览 器 上 访问 。 引 入 BootStrap， 这 里 我 
们 使 用 CDN 上 的 BootStrap 文件 ， 并 引入 style.css。 创 建 基本 的 页 面 结构 。 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title> 小 明 的 求职 简历 </title> 
<!-- 新 BootStrap 核心 Css 文件 --> 
<link rel="stylesheet" 
href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
<!-- jQuery 文件 。 务 必 在 bootstrap.min.js 之 前 引入 --> 
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> 
<!-- 最 新 的 Bootstrap 核心 JavaScript 文件 --> 
<script 
src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script 
和 
<link rel="stylesheet/less" type="text/css" href="css/style.css"> 
</head> 
<body> 
<section> 
</section> 
<footer> 
<div class="container"> 
<p>Copyright gcopy; 2015, All Rights Reserved</p> 
</div> 
</footer> 
</body> 
</html> 


(2) 完成 整个 页 面 的 布局 设计 ， 根 据 页 面 需 求 ， 我 们 知道 主 区 域 可 以 分 为 4 行 , 第 1 行 
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是 头像 及 姓名 区 域 ， 第 2 行为 “关于 我 ”和 “联系 方式 ”( 分 两 列 ， 一 列 占 7/12 宽度 ， 另 一 
列 占 5/12 宽度 )， 第 3 行为 “教育 经 验 ” 和 “编程 技能 ”， 第 4 行为 “求职 意向 ”和 “我 的 
作品 ”。 代 码 如 下 : 


<section> 





<div class="container container-main"> 


<img src="img/person.png" class="profile-img"> 


<header> 
<h1> 您 好 <br> 我 的 名 字 是 <strong> 小 明 </strong> 我 是 一 个 前 端 工程 师 </h1> 
</header> 


<img src="img/line.png" class="line"> 
<div class="row"> 
<div class="col-md-7"> 
<h2># 关于 我 </h2> 
</div> 
<div class="col-md-5"> 
<h2># 联系 方式 </h2> 
</div> 
</div> 
<div class="row"> 
<div class="col-md-7"> 


<h2># 教育 & 经 验 </h2> 


</div> 
<div class="col-md-5"> 
<h2># 编程 技能 </h2> 
</div> 
</div> 


<div class="row"> 
<div class="col-md-7"> 
<h2># 求职 意向 </h2> 


</div> 
<div class="col-md-5"> 
<h2># 我 的 作品 </h2> 


</div> 
</div> 


</div> 
</section> 


(4) 实现 联系 方式 div。 

(5) 实现 “教育 经 验 和 编程 技能 ”div。 自 学 BootStrap 进度 条 ， 包 括 progress progress-bar 
progress-bar-success progress-bar-striped， 完 成 编程 技能 条 的 效果 。 

(6) 实现 “求职 意向 ”和 “我 的 作品 ”div。 自 学 BootStrap 警告 框 (Alert) 用 法 ， 包 括 
alert-success、alert-info 等 ， 完 成 “求职 意向 ”div。 
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(7) 使 用 scss 优化 CSS 代码 ,在 scss 文件 夹 下 创建 style.scss 文件 ,提取 CSS 文件 中 body 
区 域 的 字体 大 小 、 字 体 颜 色 、 背 景 颜色 、 标 题 和 footer 的 主要 颜色 为 变量 ， 并 将 修改 后 的 内 
容 保存 到 style.scss。 在 head 的 最 后 引用 style.scss 和 lessmin js。 


本 章 小 结 











本 章 介 绍 了 CSS3 关于 动画 的 新 特性 。CSS3 增加 了 两 种 动画 实现 方式 一 种 
是 transition( 过 渡 )， 另 一 种 是 animation( 动 画 )。CSS3 动画 比 jQuery 动画 更 轻 量 ， 性 能 更 好 ， 
更 易于 实现 ， 同 时 也 不 必 担 心 缺乏 标准 。 最 后 又 学 习 了 BootStrap 的 入 门 知识 。 


本 章 练习 


1. CSS3 中 transition( 过 渡 ) 和 animation( 动 画 ) 的 区 别 是 什么 ? 
2. less 的 作用 是 什么 ? 
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JavaScript 是 一 种 广泛 使 用 的 编程 语言 ， 从 前 端 网 页 到 移动 Web 应 用 程序 ，JavaScript 无 
处 不 在 。 根 据 编程 语言 社区 排行 榜 的 数据 ，JavaScript 的 热门 度 越 来 越 高 。 一 方面 是 因为 
JavaScript 比较 容易 学 习 ， 男 一 方面 是 近 几 年 HIMLS 的 出 现 ， 将 JavaScript 提升 到 了 前 所 未 
有 的 高 度 。 它 既 适 合 当 作 学 习 编程 的 入 门 语言 ， 也 适合 当 作 上 日 常 开发 的 工作 语言 。 它 是 目前 
最 有 和 希望、 前 途 最 光明 的 计算 机 语言 之 一 。 


本 章 内 容 : 

e@ ”如 何 使 用 JavaScript 变量 、 循 环 遍历 、 内 置 对 象 
如 何 使 用 JavaScript 正则 表达 式 

如 何 使 用 JavaScript 对 象 和 函数 
文档 对 象 模型 (DOM) 

浏览 器 事件 模型 


3.1 JavaScript 简介 


3.1.1 JavaScript 是 什么 


当 互 联网 用 户 还 仅仅 通过 28.8 Kb/s 的 调制 解 调 器 连接 到 网 络 时, 设想 一 下 , 用 户 填 完 一 
个 表单 ， 单 击 “ 提 交 ” 按 钮 ， 等 待 了 30 秒 的 处 理 后 ， 看 到 的 却 是 一 条 告诉 用 户 “ 你 忘记 填写 
一 个 必要 的 字段 ”的 消息 。 这 会 让 用 户 多 么 痛苦 。 随 着 网 络 的 普及 ， 对 于 开发 客户 端 脚本 的 
需求 也 逐渐 增 大 。1995 年 , Netscape( 网 景 ) 公 司 的 Brendan Eich 在 网 景 导航 者 浏览 器 上 首次 设 
计 实 现 了 LiveScript 脚本 语言 。 因 为 网 景 公司 正在 与 Sun 公司 合作 ， 网 景 公司 的 管理 层 希 望 
它 外 观看 起 来 像 Java， 因 此 取 名 为 JavaScript。 微 软 为 了 获取 技术 优势 ， 决 定 进 军 浏览 器 ， 发 
布 了 下 3.0 并 搭载 了 一 个 JavaScript 的 克隆 版 ， 叫 做 JScript。1997 年 ，JavaScript 1.1 作为 一 
个 草案 提交 给 欧洲 计算 机 制造 商 协会 ECMA)。 第 39 技术 委员 会 (TC39) 被 委派 来 “标准 化 一 
门 通用 、 跨 平台 、 中 立 于 厂商 的 脚本 语言 的 语法 和 语义 ”， 由 来 自 Netscape、Sun、 微 软 、 
Borland 和 其 他 一 些 对 脚本 编程 感 兴趣 的 公司 的 程序 员 组 成 的 TC39 推出 了 ECMA-262, 该 标 
准 定义 了 名 为 ECMAScript 的 全 新 脚本 语言 。 以 后 的 JavaScript 遵循 了 ECMAScript 标准 ， 并 
且 还 加 入 了 DOM( 文 档 对 象 模型 ) 和 BOM( 浏 览 器 对 象 模型 )。 

本 书 中 使 用 的 JavaScript 版 本 为 ECMAScript 5。 

JavaScript 是 一 种 解释 型 脚本 语言 ， 是 一 种 动态 类 型 、 弱 类 型 的 语言 。 它 的 解释 器 被 称 为 
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JavaScript 引擎 ， 为 浏览 器 的 一 部 分 ， 广 泛 用 于 客户 端的 脚本 语言 。 它 最 早 是 在 HIML 网 页 
上 使 用 ， 用 来 给 HTML 网 页 增加 动态 功能 。 其 次 ，JavaScript 是 基于 对 象 的 语言 ， 基 于 对 象 
的 语言 含有 面向 对 象 语言 的 思想 ， 但 比 面向 对 象 语言 简单 。 再 次 ，JavaScript 是 基于 事件 驱动 
的 语言 ， 它 是 在 用 户 界面 的 环境 下 ， 使 得 一 切 输入 变化 简单 化 。 我 们 通常 将 鼠标 或 热 键 的 动 
作 称 为 事件 (Evenb, 而 将 由 鼠标 或 热 键 引发 的 一 连 串 程序 的 动作 称 为 事件 驱动 (Event Driven， 
对 事件 的 响应 由 编写 的 事件 响应 处 理 函 数 来 完成 。JavaScript 也 是 浏览 器 的 编程 语言 ,只 要 有 
浏览 器 存在 就 能 够 解释 JavaScript， 与 操作 系统 无 关 ， 因 此 它 具 有 跨 平 台 性 。 

在 人 人 微 博 网 站 中 ， 我 们 希望 用 户 的 登录 名 既 可 以 是 邮箱 地 址 也 可 以 是 手机 号 ， 这 就 需 
要 使 用 JavaScript 在 客户 端 进行 验 证 。 还 希望 在 首页 有 一 个 公告 栏 ， 能 够 滚动 显示 一 些 信息 ， 
如 图 3-1 所 示 。 






































文字 消息 最 扯 分 手 理由 有 哪些 第 三 届 微 小 说 大 赛 





图 3-1 滚动 显示 
这 些 实用 的 功能 ， 在 学 习 本 章 知识 的 过 程 中 ， 本 书 会 逐一 实现 。 
3.1.2 JavaScript 的 作用 


e 富 客 户 端 开发 (RIA): gmail、google reader 等 都 是 RIA 的 典型 。 使 用 JavaScript 可 以 验 
证 表单 字段 动态 地 更 改 页 面 元 素 的 外 观 、 深 动 内 容 等 。 Firefox 的 界面 就 是 用 JavaScript 
实现 的 ， 我 们 可 以 到 Firefox 的 安装 目录 下 随便 解压 一 个 jar 包 看 看 ， 里 面 有 大 量 的 
JavaScript 代码 。 

e 浏览 器 的 平台 化 : 随 着 HTMLS5 的 出 现 , 浏览 器 本 身 的 功能 越 来 越 强 , 不 再 仅仅 能 浏 
览 网 页 ， 而 是 越 来 越 像 一 个 平台 ，JavaScript 因此 得 以 调用 许多 系统 功能 ， 比 如 操作 
本 地 文件 、 操 作 图 片 、 调 用 摄像 头 和 麦克 风 等 。 这 使 得 JavaScript 可 以 完成 许多 以 前 
无 法 想象 的 事情 。 

e 服务 器 端 : Nodejs 项 目 使 得 JavaScript 可 以 用 于 开发 服务 器 端的 大 型 项 目 , 网 站 的 前 
后 端 都 用 JavaScript 开发 已 经 成 为 现实 。 

e ”数据 库 操作 : JavaScript 甚至 也 可 以 用 来 操作 数据 库 。NoSQL 数据 库 ( 将 在 第 5 章 介 
绍 ) 这 个 概念 ， 本 身 就 是 在 JSON(JavaScript Object Notation，JavaScript 对 象 表示 法 ) 
格式 的 基础 上 诞生 的 ， 大 部 分 NoSQL 数据 库 允 许 JavaScript 直接 操作 。 基 于 SQL 语 
言 的 开源 数据 库 PostgreSQL 支持 JavaScript 作为 操作 语言 ， 可 以 部 分 取代 SQL 查询 


语言 。 


3.1.3 在 网 页 中 插入 JavaScript 的 方法 
我 们 先 来 看 看 第 一 个 JavaScript 脚本 ， 代 码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
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<title> 简 单 的 JavaScript Hello World</title> 
<script> 


document .write ("Hello，world!");  // 在 浏览 器 视窗 内 直接 显示 
</script> 


</head> 
<body> 


</body> 
</html> 


在 本 例 中 ， 把 <scrip 伺 元 素 置 于 网 页 的 head 部 分 ， 然 后 在 其 中 加 入 脚本 程序 。 脚 本 中 使 
用 write 方法 向 网 页 中 添加 了 一 个 新 文本 行 。 图 3-2 展示 了 这 一 简单 页 面 的 效果 。 


Hello，world! HTNL 内 容 …… 











图 3-2 ”页面 的 效果 


JavaScript 在 页 面 中 放置 的 位 置 很 重要 。<scrip 人 元 素 也 可 以 位 于 body 中 ,脚本 语言 的 执 
行 顺序 与 书写 顺序 相同 。 在 浏览 器 解析 HTML 文档 时 ， 无 论 何 时 遇 到 脚本 块 ， 都 会 停止 对 
HTML 代码 的 解析 ， 转 而 执行 脚本 块 中 的 代码 。 示 例如 下 : 
<!DOCTYPE html> 
<html> 
<head> 
<title> 简 单 的 JavaScript Hello World</title> 
<script> 
document .write ("Hello，world!");  // 在 浏览 器 视窗 内 直接 显示 
</script> 
</head> 
<body> 
HTML 内 容 ……<br> 
<script> 
document .write ("Hello，world 123!"); // 在 浏览 器 视窗 内 直接 显示 
</script> 
</body> 
</html> 


代码 效果 如 图 3-3 所 示 。 





Hello，world! HITIL 内 容 …… 
Hello, world 123! 





图 3-3 ”代码 效果 





但 一 般 不 推荐 这 样 使 用 ， 这 样 对 于 页 面 的 性 能 和 可 维护 性 都 是 不 好 的 做 法 。 另 一 种 添加 
JavaScript 的 方法 是 引入 文件 扩展 名 为 js 的 外 部 文档 。 如 果 脚 本 用 于 多 于 一 个 页 面 的 话 ， 就 
不 需要 在 每 个 使 用 该 脚本 的 页 面 中 重复 其 内 容 。 如 果 需 要 更 新 脚本 ， 则 只 需要 修改 一 处 的 内 
容 。 同 时 这 样 也 使 得 整个 HIML 页 面 更 加 简洁 和 易 读 。 只 要 使 用 <scrip 忆 元素 的 src 属性 指向 
包含 JavaScript 文件 的 绝对 或 相对 URL 即 可 ， 比 如 : 


<script src="scripts/changeinfo.js"></script> 
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3.1.4 如 何 调试 JavaScript 


所 有 的 主流 浏览 器 现在 都 带 有 一 个 运行 JavaScript 的 接口 ， 叫 做 控制 台 。JavaScript 程序 
开发 人 员 可 以 在 控制 台中 记录 应 用 程序 的 日 志 信息 ， 并 可 以 直接 运行 JavaScript 代码 ， 这 样 
可 以 输入 一 个 或 一 系列 命令 ， 然 后 立刻 看 到 结果 。 我 们 也 可 以 交互 式 对 JavaScript 语言 的 基 
础 代码 进行 演练 。 可 以 在 Google Chrome 浏览 器 中 找到 开发 者 工具 栏 ， 也 可 以 使 用 快捷 键 
Control+ShifttJ 打开 控制 台 ， 如 图 3-4 所 示 。 
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图 3-4 JavaScript 控制 台 


我 们 在 图 3-4 所 示 的 控制 台中 输入 了 console.log("Web 编程 ")， 并 得 到 了 输出 结果 。 这 
样 可 以 工作 的 原因 是 控制 台 使 用 了 拥有 方法 log0 的 console 对 象 ， 使 我 们 能 够 向 控制 台 写 
入 消息 。 

在 Sources 标签 栏 中 可 以 调试 JavaScript， 如 图 3-5 所 示 。 


Q OD Elements Network|Saareesl|Tmeine Profies Resources Audits Console 


Sour. | Cont。 Snip.。 |[ 辐 | helloworldhtml x 加 中 + 71+ Io 
vOfie// I 2 | Watch Erpressions 
2 chtml> = a 
v | 
C/Users/zhangper| F "A Me 
瑟 helloworldhtml | 4 title) 简 单 的 JavaScript Hello Worlde/title> $( "input 
5 二 i a 
| </script> (anonymous function) 
‘</head> 
<body> | 
HTML content<br> | 
《script type="text/javascript”» | Y Scope Variables 
document .write("Hello，world 1231");  // 在 浏览 器 视窗 内 直接 ! 国 | > Global 
</scripty Y Breakpoints 
</body> Pe 
@ helloworldhtmt:6 
document .write("Hello, world!") 
» DOM Breakpoints 
XHR Breakpoints 
了 | Event Listener Breakpoints 
» 
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图 3-5 调试 JavaScript 


在 Firefox 中 还 有 同样 强大 的 Firebug 插件 , 它 集 HTML 查看 和 编辑 、JavaScript 控制 台 、 
网 络 状况 监视 器 于 一 体 ， 是 开发 JavaScript、CSS、HTML 和 Ajax 的 得 力 助 手 。 
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下 载 地址 是 https://getfirebug.com/。 可 以 使 用 快捷 键 F12 打开 Firebug， 如 图 3-6 所 示 。 
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图 3-6 Firebug 


为 了 容易 阅读 代码 和 方便 调试 ， 我 们 可 以 在 代码 中 加 入 注释 。 可 以 通过 两 种 方式 在 
JavaScript 代码 中 添加 注释 。 第 一 种 是 使 用 双 正 斜 线 字符 ， 例 如 : 


<script> 
document .write ("Hello，world!");  // 在 浏览 器 视窗 内 直接 显示 
</script> 
第 二 种 是 将 注释 内 容 放 置 于 起 始 符 号 /+ 与 结束 符号 */ 之 间 ， 例 如 : 
/* 声 明 
变量 */ 
var a = "js"; 


3.2 ”JavaScript 基础 语法 


3.2.1 JavaScript 的 变量 


Var name = "John"7 

age = 20; 

JavaScript 声明 变量 时 使 用 var， 因 为 JavaScript 采用 弱 类 型 的 变量 形式 ， 声 明 时 不 需要 
变量 类 型 ， 这 与 Java 语言 不 同 ， 在 赋值 时 自动 确定 变量 的 类 型 。var 可 以 省 略 ， 但 是 不 建议 
省 略 。 另 外 ， 变 量 的 名 称 必须 遵循 一 些 规 则 : 变量 名 区 分 大 小 写 ; 首 字 母 必 须 是 字母 、 下 划 
线 (_) 或 美元 符号 (8); 余下 的 字母 可 以 是 下 划 线 、 美 元 符号 、 任 意 字母 或 数字 ， 变量 名 中 不 能 
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有 空格 、 回 车 符 或 其 他 标点 字符 ， 变 量 名 不 能 是 关键 字 ( 如 表 3-1 所 示 )。 


表 3-1 JavaScript 关键 字 
function 
下 


instanceof 














另外 JavaScript 还 有 一 些 保留 字 ( 如 表 3-2 所 示 ), 这 些 保留 字 以 后 JavaScript 可 能 会 使 用 。 


表 3-2 _ JavaScript 保留 字 











abstract double 
boolean enum ee 
byte export 


char [| protected 
class 


const short 





如 果 只 是 声明 了 变量 而 没有 使 用 ， 例 如 : 

Var School 

这 时 变量 school 的 值 为 undefined， 可 以 理解 为 是 一 个 常量 ,用 来 表示 变量 没有 赋值 。 下 
面 我 们 看 一 下 给 变量 赋值 : 

name = "peter"; 


age = "90s"; 


3.2.2 ” ”JavaScript 的 6 种 数据 类 型 


JavaScript 的 数据 类 型 分 为 两 类 :原始 类 型 (primitive type) 和 对 象 类 型 (object type)。 原 始 
类 型 包括 数值 mumber)、 字 符 串 (string)、 布 尔 值 (boolean)、 空 (qulD 和 未 定义 (undefined)。 其 中 
null 和 undefined 是 特殊 类 型 ， 以 后 会 详细 介绍 。 对 象 类 型 只 有 对 象 (objecb， 这 是 因为 函数 、 
数组 等 都 被 视 为 对 象 。 

1. 字符 串 

字符 串 由 零 个 或 多 个 字符 构成 。 字 符 可 以 是 字母 、 数 字 、 标 点 符号 或 空格 。 字 符 串 必须 
放 在 单 引号 或 双 引 号 中 。 字 符 串 常量 必须 使 用 单 引号 或 双 引 号 引起 来 ， 如 果 一 个 字符 串 中 含 
有 双 引 号 ， 则 只 能 将 该 字符 串 放 在 单 引号 中 。 例 如 : 

var tmp = ' "OK",I said. '; // 输 出 "OK",I said. 

更 通用 的 方法 是 使 用 转 义 字符 (escaping)“\” 实 现 特殊 字符 按 原样 输出 。 例 如 : 


var tmp = "Consumer Rights Day 3\' 15" ;// 输出 Consumer Rights Day 3' 15 
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2. 数值 型 


JavaScript 提供 了 统一 的 数值 表示 方法 , 它 不 区 分 整 型 和 浮 点 型 。 数 值 型 数据 和 字符 型 数 
据 的 区 别 是 数值 型 数据 不 用 引号 引起 来 。 例 如 ， 下 面 都 是 正确 的 数值 表示 法 : 








Var numl = 37; 
var num2 = 37.32; 
var num3 = -3e7; 
3. 布尔 型 


布尔 型 数据 的 值 只 包含 rue 和 false。 布 尔 型 数据 不 能 用 引号 引起 来 ， 否 则 就 变 成 字符 串 
了 。 例 如 : 


var approved = true; 


4. null 


null 值 用 来 指出 对 象 属性 不 包含 值 。 通 常 ， 如 果 设置 一 个 属性 包含 值 ， 但 出 于 某 种 原因 
这 个 值 还 不 能 用 ， 那 么 应 该 使 用 null 值 来 表明 属性 拥有 一 个 空 值 。 例 如 : 
var myObject = new Object (); 


myObject .name=null; 
console.1og (myObject.name);// 输出 null 


那么 如 何 判 断 一 个 值 是 不 是 null 呢 ? 对 null 使 用 typeof 运算 符 会 返回 object， 显 然 使 用 
typeof 不 能 判断 一 个 值 是 不 是 null。 为 了 更 明确 地 验证 null 值 , 应 该 使 用 ===( 强 等 于 ) 运 算 符 。 
例如 : 

var myObject = null; 


console.log (typeof myObject);// 输 出 object 
console.1og (myObject === null);// 输 出 true 


5. undefined 


有 两 种 情况 会 用 到 undefined: 一 种 是 声明 了 变量 (如 var foo) 而 没有 指定 值 ， 第 二 种 情况 
是 试图 访问 的 对 象 属性 没有 被 定义 。 例 如 : 

var initializedVariable; // 声明 变量 

console.log (initializedVariable); // 输出 undefined 

console.log(typeof initializedVariable); // 输出 undefined 

Var foo = new Object(); 

console.1og (foo.bar); // 输出 undefined 

console.1log (typeof foo.bar); // 输出 undefined 


6. 对 象 包装 


JavaScript 使 用 “字面 量 ” 的 快捷 方式 创建 大 多 数 原始 类 型 ， 而 JavaScript 对 象 则 可 以 使 
new 操作 符 创建 ， 比 如 : 
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Var ob]j = new Object(); 
obj.name="'zs"'; 


JavaScript 对 象 会 在 下 节 详 细 介绍 ， 由 于 在 实际 使 用 中 对 string、number、boolean 的 操作 
非常 多 ，JavaScript 进行 了 进一步 的 包装 ， 提 供 了 内 置 的 Sting0、Number0、Boolean0 对 象 。 
我 们 可 以 使 用 new 操作 符 创建 Sting 对 象 、Number 对 象 、Boolean 对 象 。 例如 : 

Var stringObject = new String('foo'); 


Var numberObject = new Number (1) 
Var booleanObject = new Boolean (false); 


我 们 可 以 使 用 typeof 运算 符 返 回 数据 的 类 型 ， 例 如 : 


// string，number，and boolean 对 象 

console.log(typeof new String('foo')); // 输出 'object' 
console.log (typeof new Number (1) ) ; // 输 出 'object' 
console.log(typeof new Boolean (true) ) ; // 输 出 'object' 


// string，number，and boolean 字面 量 /原始 值 
console.log(typeof 'foo'); // 输 出 'string' 
console.1og (typeof 1); // 输 出 'number' 
console.log(typeof true); // 输 出 'boolean' 


字符 串 对 象 实例 的 常用 属性 有 length 属性 ， 常 用 的 方法 如 表 3-3 所 示 。 


表 3-3 JavaScript 字符 串 常用 的 方法 


方 ” 法 示例 
扳 回 一 个 守 色 给 定位 置 的 字符 , 位 置 var s = new String("abc"); 
a 返回 一 个 字符 串 的 给 定位 置 的 字符 , 位 置 | 


从 0 开始 编号 s.charAt (s.length -1) // "cn" 


& i : var s = new String("abc") 
反 辐 给 定位 置 字符 所 | 
charCodeAt “| 返回 给 定位 置 字符 的 Unicode 编码 s.charCodeAt (1) // 98 


Var sl = "abc"; 
concat 用 于 连接 两 个 字符 串 var s2 = "def"; 
sl.concat (s2) // "abcdef" 


用 来 返回 一 个 字符 串 的 子 串 , 第 一 个 参数 








ey = "The Th Musket 区 
substing 。 ”| 表示 子 字符 串 的 开始 位 置 ,第 二 个 参数 表 | 2 substring (4，9) /Three 
示 结 束 位 置 
用 来 返回 一 个 字符 串 的 子 串 ， 第 一 个 参数 ER 
var b = e ree Musketeers'; 
substr 是 子 字符 串 的 开始 位 置 ， 第 二 个 参数 是 子 | 5 substr (4，9) 7/] ,Three Mas 
字符 串 的 长 度 
用 来 返回 一 个 字符 串 的 子 串 ,第 一 个 参数 ， 
ee 是 子 字符 串 的 开始 位 置 , 第 二 个 参数 是 子 var c = 'The Three Musketeers'; 


c.slice(4, 9) // 'Three' 


字符 串 的 结束 位 置 





用 于 确定 一 个 字符 串 在 另 一 个 字符 串 中 
indexOf 的 位 置 ， 从 字符 串 头 部 开始 匹配 。 如 果 返 | "hello worlqd".indexof ("o"); 
回 -1， 就 表示 不 匹配 
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( 续 表 ) 
方 ” 法 示例 
用 于 确定 一 个 字符 串 在 另 一 个 字符 串 中 | "hello world".lastIndexOf ("o") 
lastIndexOf i 
的 位 置 ， 从 尾部 开始 匹配 KA 
和 i ps " hello world " -trim() 
on 用 于 去 除 字符 申 两 端的 空 格 //_"hello world" 
"Hello World".toLowerCase() 
将 一 个 空 休 类 小安 
| // _ "hello world" 
sy i "Hello World".toUpperCase() 
将 一 个 字 徊 = 
| 周二 将 二 个 子 特 中 和 为 大 写 //_"HELLO WORLD" 
Var matches = "cat, bat, sat, 


匹配 字符 串 ， 返 回 一 个 数组 ， 返 回 的 数 | fat" .match ("at"); 
组 拥有 index 属性 和 input 属性 ， 分 别 表 | matches // ["at"] 





本 :区 配 字符 串 开始 的 位 置 (从 0 开始 和 和 | matches .index // 1 
原始 字符 串 matches.input 
7 "cat, bat, sat; fat™ 
由 等 同 于 match， 但 是 返回 值 为 匹配 的 第 一 | "cat, bat, sat, fat".search("at") 
个 位 置 /1/1 
a a Ea "aaa".replace("a", "b") 
replace 替换 匹配 的 子 字符 串 i 
//_"baa 
i 按照 给 定 规则 分 割 字 符 串 , 返回 一 个 由 分 | "alblc".split ("1") 





割 出 来 的 各 部 分 组 成 的 新 数组 A a "be "er 
3.2.3 JavaScript 的 运算 符 


JavaScript 的 运算 符 和 Java 的 语法 相似 ， 包 括 加 、 减 、 乘 、 除 ， 自 增 (++)、 自 减 (- 了 )、 赋 
值 运算 符 、 比 较 运 算 符 、 逻 辑 运算 符 、 位 运算 符 等 。 例 如 : 

var a= 1; 

a = af+l;//a 的 值 为 2 

a += 1; //a 的 值 为 3 


a++;//a 的 值 为 4 
++ta;; //a 的 值 为 5 


使 用 加 号 、 减 号 的 时 候 ， 如 果 两 边 的 数据 类 型 不 一 致 ， 会 使 用 隐 式 类 型 转换 。 例 如 : 

"18"-2 // 输 出 16 

"18"+2 // 输 出 182 

我 们 可 以 巧 用 这 个 规则 进行 数据 类 型 转换 ， 比 如 把 string 转换 为 number， 只 要 减 0 就 可 
以 了 ， 把 number 转换 为 string 只 要 加 空 字符 串 就 可 以 了 。 代 码 如 下 : 


var tr = "10"> 

var num = str -0; 

console.1og (typeof num) ;// 输出 number 
Var s = numt""; 


console.1log (typeof s);// 输出 string 


比较 运算 符 用 来 比较 两 个 操作 数 的 大 小 。 实 例 见 表 3-4。 
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表 3-4 ”JavaScript 比较 运算 符 








运算 符 说 明 示例 

A =7,b="5"; 
是 否 相等 (只 检查 值 ) 4 ;//true 
a 

一 - 是 否 全 等 (检查 值 和 数据 类 型 ) 1 
是 二 不 等 于 二 

EF 是 否 不 等 于 a!=b;//false 
昌 Mie a=7,b="7"; 

一 是 否 不 全 等 于 a!==b;//true 

eh 本 a i a=7,b=5; 

>、<、>=、<= | 大 于 、 小 于 、 大 于 等 于 、 小 于 等 于 a 








使 用 一 进行 类 型 比较 时 ， 如 果 两 边 的 数据 类 型 不 一 致 ， 也 会 进行 隐 式 类 型 转换 ， 然 后 再 
比较 。 例 如 : 
=="1.0"// 输 出 true 
上 面 的 例子 中 ，string 和 number 比较 会 将 string 转换 为 number， 然 后 再 比较 : 


1==true// 输 出 true 
0==false// 输 出 true 
2==true// 输 出 false 


上 面 的 例子 中 ，boolean 和 number 比较 会 将 true 转换 为 1、false 转换 为 0， 然后 再 比较 。 
另外 ， 对 象 只 有 在 引用 相同 的 对 象 ( 即 有 相同 的 地 址 ) 时 才 相等 。 在 下 面 的 示例 中 ，objectFoo 
和 objectBar 有 相同 的 属性 ， 但 通过 一 或 者 = 一 询问 它们 是 否 相等 时 ，JavaScript 会 告诉 我 们 ; 
它们 不 相等 。 


Var objectFoo = new Object(); 

objectFoo.name = "name"; 

Var objectBar = new Object(); 

objectBar.name = "name"; 

console.1og (objectFoo == objectBar);// 输出 false 
console.1og (objectFoo === objectBar) ;// 输出 false 


var objectA = new Object (); 

objectA.name = "name"; 

Var objectB = objectAa; 

console.1og (objectA == objectB) ;// 输出 true 
console.1og (objectA === objectB) ;// 输出 true 





null 与 undefined 比较 时 有 些 特殊 ， 用 二 比较 两 者 是 相等 的 。 例 如 : 


null == undefined // 输 出 true 
null === undefined // 输 出 false 
null == nul1// 输 出 true 
undefined == undefined// 输 出 true 


逻辑 运算 符 包 括 &&( 逻 辑 与 )、||( 罗 辑 或 ) 、!( 逻 辑 非 )、^( 逻 辑 异 或 )。 位 运算 符 包 括 <<( 左 
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移 )、>>( 右 移 )、~( 取 补 )。 此 外 还 有 其 他 的 运算 符 : 
e new 运算 符 : 用 来 创建 一 个 对 象 或 生成 一 个 对 象 的 实例 。 
e typeof 运算 符 : 返回 一 个 用 来 表示 表达 式 的 数据 类 型 的 字符 串 。 
。 in 运算 符 : 测试 一 个 对 象 中 是 否 存 在 一 种 属性 。 例 如 : 
Var myObject = new Object (); 
myObject .name = "Jam"; 
myObject.age = "22"; 
myObject.phone = "555 5555"7 
if ("phone" in myObject) 
console.log ("property is present"); 
else 
console.1og ("property is not present"); 


e instanceof 运算 符 : 返回 一 个 布尔 值 ， 该 值 指示 一 个 对 象 是 否 为 特定 类 的 一 个 实例 。 
例如 : 
var obj = new Object(); 


obj .name='zs'7 
obj instanceof Object// 输 出 tue 


e 条 件 运 算 符 ， 这 是 JavaScript 唯一 的 三 目 运算 符 ， 即 它 的 操作 数 有 3 个 。 例 如 : 
greeting=(visitor=="PRES")?"Dear President ":"Dear "; 
如 果 变量 visitor 中 的 值 是 PRES， 则 向 变量 greeting 赋值 Dear President， 否则 赋值 Dear。 
3.2.4 JavaScript 流程 控制 


1. 首 语句 

站 语句 的 语法 是 : 

if (condition) statement1l else statement2 

或 者 

if (condition1l) statement1l else if (condition2) statement2 else statement3 


例如 : 


EF (让 光 0 大 二 
alert ("大 于 10"); 
} else it (i < 0) { 
alert ("小 于 0"); 
} else { 
alert ("在 0 到 10 之 间 "); 
} 
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2. 循环 语句 
循环 通常 用 于 迭代 数组 的 值 ， 或 者 执行 重复 的 算术 任务 。 下 面 介 绍 ECMAScript 提供 的 


4 种 迭代 语句 。 


此 


while 语句 是 前 测试 循环 。 这 意味 着 退出 条 件 是 在 执行 循环 内 部 的 代码 之 前 计算 的 。 因 
循环 主体 可 能 根本 不 被 执行 。 它 的 语法 如 下 : 


while (expression) statement 


例如 : 


var i = 0; 
while (i < 10) { 
i += 2; 


} 
do-while 与 while 语句 不 同 ， 它 是 后 测试 循环 ， 即 退出 条 件 在 执行 循环 内 部 的 代码 之 后 


计算 。 这 意味 着 在 计算 表达 式 之 前 ， 至 少 会 执行 循环 主体 一 次 。 


它 的 语法 如 下 : 
do {statement} while (expression); 


例如 : 


var i = 0; 
do {i += 2;} while (i < 10); 


for 语句 是 前 测试 循环 ， 而 且 在 进入 循环 之 前 ， 能 够 初始 化 变量 ， 并 定义 循环 后 要 执行 


的 代码 。 


它 的 语法 如 下 : 

for (初始 表达 式 ; 循环 条 件 表达 式 ; 计数 表达 式 ) {语句 块 } 
注意 : 计数 表达 式 之 后 不 能 写 分 号 ， 否 则 无 法 运行 。 例 如 : 
iCount = 6; 

for (var i = 0; i < iCount; i++) { 


alert (i); 


} 
这 段 代码 定义 了 初始 值 为 0 的 变量 i。 只 有 当 条 件 表达 式 Gi <iCount) 的 值 为 rue 时 , 才 进 


入 for 循环 ， 这 样 循环 主体 可 能 不 被 执行 。 如 果 执 行 了 循环 主体 ， 那 么 将 执行 循环 后 表达 式 ， 





并 达 代 变量 


3. forin 语句 


for-in 语句 用 来 枚 举 对 象 的 属性 。 它 的 语法 是 : 


for (Property in expression) statement 
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例如 : 


Var objectA = new Object (); 

objectA.name = "name"7 

for (sProp in ObjectA) { 
console.1log(sProp); 


} 


4. break 和 continue 语句 


break 和 continue 语句 为 循环 中 的 代码 提供 了 退出 循环 的 方法 。break 和 continue 语句 的 
不 同 之 处 是 break 语句 可 以 立即 退出 循环 ， 阻 止 再 次 反复 执行 任何 代码 ， 而 continue 语句 只 
是 退出 当前 循环 ， 根 据 控制 表达 式 还 允许 进入 下 一 次 循环 。 例 如 : 


var iNum = 0; 
for (var 1i=17 i<10; i++) { 
if (i % 5 == 0) { 
break; 
} 
iNumt++; 
} 
alert (iNum) ; // 输 出 "4" 


如 果 用 continue 语句 代替 这 个 例子 中 的 break 语句 ， 结 果 将 不 同 : 


var iNum = 0; 

for (var i=1; i<10; i++) { 
if (i % 5 == 0) { 

continue; 

} 
iNumt++; 

} 

alert (iNum) ; // 输 出 "8" 


5. try-catch 语句 


当 JavaScript 引擎 执行 JavaScript 代码 时 ， 会 发 生 各 种 错误 : 可 能 是 语法 错误 ， 通 常 是 程 
序 员 造 成 的 编码 错误 或 错别字 ; 可 能 是 拼写 错误 或 语言 中 缺少 的 功能 (可 能 缘 于 浏览 器 差异 )。 
JavaScript 提供 了 异常 捕获 机 制 ， 语 法 是 : 


try 

{ 
// 代 码 块 

} 

catch (exception){ 
/ /处理 错误 

} 

finallyt{ 
// 代 码 块 

} 
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如 果 没 有 发 生 任 何 异 常 ，catch 中 的 代码 就 会 被 忽略 , 但 是 不 管 有 没有 异常 ， 最 后 都 会 执 
行 finally 中 的 代码 。 例 如 : 





try{ 
alertE ("hello™"); 
}catch (err) 


txt="There was an error on this page.\n\n"; 
txt+="Error description: " + err.message + "\n\n"; 
txt+="Click OK to continue.\n\n"; 

alert (txt); 


} 


我 们 故意 把 alert 错 写 为 alertE，catch 块 会 捕捉 到 try 块 中 的 错误 , 并 执行 代码 来 处 理 它 。 
try 语句 块 的 后 面 可 以 有 一 个 catch 语句 块 或 finally 语句 块 ， 当 然 也 可 以 两 者 都 有 。 例 如 : 


try{ 
alert ("hello"); 

}finallyt{ 
console.log("finally"); 


} 
如 果 要 创建 自 定义 错误 ， 可 使 用 throw 语句 。 例 如 : 


try{ 

try{ 
throw "test"; 

} 
finallyt{ 
console.log("finally"); 
} 

} 


catch (ex) {console.log (ex);} 


在 上 面 的 例子 中 ， 我 们 嵌 套 使 用 了 try-catch 语句 ， 内 层 的 try 语句 抛 出 了 自 定义 错误 ， 
但 是 没有 catch 语句 ， 在 程序 跳出 到 外 层 时 会 先 执 行内 层 的 finally 语句 ， 所 以 先 输出 finally， 
输出 test。 
6. block 语句 ( 块 语句 ) 


块 语句 常用 于 组 合 零 到 多 个 语句 。 块 语句 用 一 对 花 括 号 定义 。 语 法 是 : 




















{ 
语句 1 
语句 2 
语句 n 
} 


块 语句 通常 和 过、while、for 等 一 起 使 用 ， 使 用 JavaScript 块 语句 需要 注意 的 一 点 是 : 没 
有 块 级 作用 域 。 例 如 : 


第 3 章 JavaScript *。85。 








fordvar = 0 < S71i#4#)4 
Var str = "ok"; 
console.log(str); 


这 段 常用 的 for 循环 块 给 人 的 感觉 是 变量 i 只 能 在 for 循环 中 访问 。 但 事实 上 由 于 没有 块 
级 作用 域 ， 在 for 循环 块 外 也 可 以 访问 变量 1。 上面 的 代码 与 下 面 的 代码 是 等 价 的 : 
var i=0 
orArl < 鸭 生 二 下 
Var str = "ok"; 
console.log(str); 


} 
console.1og (i);// 输 出 5 


后 面 我 们 会 学 习 函 数 作用 域 、eval 作用 域 ， 但 是 没有 块 作用 域 。 
3.3 _ JavaScript 对 象 


对 象 既 可 以 是 客观 世界 中 存在 的 人 、 物 体 等 实体 , 也 可 以 是 社会 生活 中 的 一 种 逻辑 结构 。 
对 象 由 两 个 元 素 构成 ， 一 个 是 属性 ， 一 个 是 方法 。 属 性 表示 有 什么 ， 用 来 描述 对 象 ， 方 法 表 
示 能 够 做 什么 ， 告 诉 外 界 对 象 有 哪些 功能 。 方 法 以 属性 为 基础 ， 对 象 的 属性 也 可 以 是 一 个 对 
象 。 比 如 一 个 人 就 是 一 个 典型 的 对 象 ， 包 含 身高 、 体 重 ， 年 龄 等 特性 ， 又 包含 吃饭 、 走 路 、 
睡觉 等 动作 。 和 象棋 规则 也 是 一 个 对 象 ， 它 包含 各 个 棋盘 属性 ， 还 有 判定 棋子 移动 是 否 有 效 的 
规则 。 

对 象 在 JavaScript 中 无 处 不 在 , 首先 JavaScript 本 身 具 有 许多 内 置 对 象 , 比如 Date、 Math、 
Array 等 。 还 包括 浏览 器 提供 的 内 置 对 象 ， 比 如 window、document、location 等 。 还 包括 各 种 
各 样 的 自 定义 对 象 。 

男 一 方面 ，JavaScript 中 也 有 一 些 简单 的 数据 类 型 ， 包 括 数字 、 字 符 串 、 布 尔 值 、nul 
值 和 undefined 值 ， 它 们 不 是 对 象 。 

3.3.1 创建 对 象 

对 象 包含 一 系列 属性 ， 这 些 属性 是 无 序 的。 每 个 属性 都 有 一 个 字符 串 key 和 对 应 的 值 ， 
这 个 值 可 以 是 原始 值 、 对 象 或 函数 。 这 种 基本 数据 结构 还 有 很 多 叫 法 ， 有 些 我 们 已 经 非常 熟 
悉 , 比如 “ 散 列 ”hash)、“ 散 列表 ”(hashtable)、“ 字 典 "(dictionary)、“ 关 联 数 组 ”(associativeArray)。 
可 以 通过 对 象 直接 量 、 关 键 字 new 和 Object.create0 函 数 来 创建 对 象 。 

1. 对 象 的 字面 量 

对 象 字面 量 提 供 了 一 种 非常 方便 的 创建 对 象 的 方法 。 一 个 对 象 字面 量 就 是 一 个 花 括 号 括 
起 来 的 键 值 对 。 属 性 名 可 以 是 JavaScript 标识 符 ， 也 可 以 是 字符 串 直 接 量 ( 包 括 空 字符 串 )。 属 
性 的 值 可 以 是 任意 类 型 的 JavaScript 表达 式 , 表达 式 的 值 (可 以 是 原始 值 也 可 以 是 对 象 值 ) 就 是 
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这 个 属性 的 值 。 例 如 : 


var e= {} 

var point = {x:0,y:0} 

Var point2 = {x:point.x,y:point.y+1} 
var obj = {a:27, "b":99}; 

var Ss = {"":898, "p":99}s 


Var book = { 
wan: nan, 
author: {firstname:"F", secondname:"S"} 


} 

当 property 中 出 现 空格 、 斜 杠 等 特殊 字符 ,或 者 使 用 的 property 与 JS 关键 词 冲突 时 ， 则 
必须 使 用 引号 。 

2. 使 用 new 运算 符 创建 对 象 

new 运算 符 后 面 跟随 一 个 对 象 类 型 的 标识 符 (构造 函数 )， 比 如 : 


Var user = new Object (); 

user.name = "a"; 

user.age = 21; 

console.log(user);// 输 出 Object {name: "a"，age: 21} 
Var myObject = new Object () ; 

myObject['0'] = 'a'; 

myObject['1'] = 'b'; 
myObject['2'] = 'c'; 

console.1log (myObject); // 输 出 Object {0: "a", 1: "b", 2: "c"} 

Var myString = new String('abc'); 

console.log (myString); // 输 出 String {0: "a", 1: "b", 2: "c", length: 3} 


上 面 的 例子 中 ， 我 们 首先 调用 构造 函数 创建 了 对 象 ， 然 后 再 给 对 象 的 属性 赋值 。 第 一 种 
方法 调用 了 Object 构造 函数 来 实现 ， 第 二 种 方法 使 用 String 构造 函数 来 实现 。 那 是 否 可 以 自 
己 定义 构造 函数 以 方便 创建 对 象 呢 ?当然 可 以 ， 比 如 : 
var Person = function(living, age, gender) { 
this.living = living; 
this.age = age; 
this.gender = gender; 
}; 
Var myPerson = new Person(true, 33, 'male'); 
console.1log (myPerson); 


上 面 的 例子 自 定义 了 Person0 构 造 函数 ， 并 使 用 它 创建 了 一 个 复杂 的 Person 对 象 。 

3. 使 用 Object.create() 创 建 对 象 

在 讲述 第 三 种 对 象 创建 技术 之 前 ， 首 先 解释 一 下 原型 的 概念 。 每 一 个 JavaScript 对 象 都 
和 另 一 个 对 象 相关 联 ， 这 里 的 另 一 个 对 象 就 是 原型 对 象 。 原 型 的 意思 就 是 每 一 个 对 象 都 从 原 
型 继承 属性 和 方法 。 
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我 们 学 习 过 String 对 象 具有 length 属性 和 trim 方法 , 这 些 属性 和 方法 是 在 原型 对 象 中 定 


义 的 。 每 个 对 象 都 有 一 个 内 部 属性 prototype， 我 们 通常 称 之 为 原型 。 原 型 的 值 可 以 是 一 个 对 
象 ， 也 可 以 是 nul。 如 果 它 的 值 是 一 个 对 象 ， 则 这 个 对 象 也 一 定 有 自己 的 原型 ， 这 样 就 形成 
了 一 条 线性 的 链 ， 我 们 称 之 为 原型 链 。 例 如 : 


Var myFunction = fnction () {} 

console.1og (myFunction.prototype) ;// 输 出 object 

console.log(typeof myFunction.prototype);// 输 出 'object' 

console.1og (String.prototype);// 输 出 String {strLen: function, strToChars: 
function, isCHS: function, subCHString: function, subCHStr: function..} 

console.1log (typeof String.prototype); // 输 出 'object" 


默认 的 prototype 属性 是 Object0 对 象 ， 而 通过 new String0 创 建 的 对 象 的 原型 就 是 


String.prototype。 由 于 prototype 属性 是 一 个 对 象 ， 因 此 原型 链 查 找到 最 后 是 Objectprototype。 
所 以 ,由 mew String0 创 建 的 String 对 象 的 属性 同时 继承 自 String.prototype 和 Objectprototype。 











当 访问 一 个 对 象 的 某 一 属性 的 ， 如 果 这 个 属性 在 此 对 象 中 不 存在 ， 就 在 它 的 prototype 





属性 所 指 的 原型 对 象 的 属性 中 寻找 。 如 果 找 到 则 返回 , 否则 继续 沿 着 prototype 链 一 直 找 下 去 ， 
直到 prototype 为 null 的 时 候 停止 。 例 如 : 


象 


o 


function foo(){} 
foo.prototype.z = 13; 
var obj = new foo(); 
obj.y = 12; 

obj.x = 11; 
console.1log (obj .x);//1 
console.1log (obj.y);//2 
console.1log (obj.z);//3 


ECMAScript 5 中 引入 了 一 个 新 方法 : Object.create。 可 以 调用 这 个 方法 来 创建 一 个 新 对 
新 对 象 的 原型 就 是 调用 create 方法 时 传 入 的 第 一 个 参数 ， 例 如 : 

var a = {a: 1}; // a ---> Object.prototype ---> null 

var b = Object.create(a);// b ---> a ---> Object.prototype ---> null 
console.log(b.a); // 1 (继承 而 来 ) 


var c = Object.create (b); 
// c ---> b ---> a ---> Object.prototype ---> null 


如 果 想 创建 一 个 没有 原型 的 新 对 象 ， 可 以 传 入 参数 null， 新 创建 的 对 象 不 会 继承 任何 东 


西 ， 甚 至 不 包括 基础 方法 (如 toString0)， 比 如 : 


var d = Object.create (nul1);// d ---> null 
console.log(d.tostring())//TypeError: undefined is not a function 


如 果 想 创建 一 个 普通 的 空 对 象 (比如 通过 了 或 new ObjectO 创 建 的 对 象 )， 需 要 传 入 


Object.prototype， 比 如 : 


Var 02 = Object.create (Object .prototype) 
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3.3.2 ”属性 的 查询 和 设置 
访问 对 象 的 属性 和 设置 对 象 的 属性 可 以 使 用 点 运算 符 或 方 括号 运算 符 ， 比 如 : 


Var obj = {x:2,y:3}; 
Dj > 

obj["y"]; 

obj["x"] = 4; 

obj.y = 5; 


这 两 种 方式 的 不 同 之 处 是 方 括号 内 还 可 以 是 一 个 计算 结果 为 字符 串 的 表达 式 ， 比 如 : 


var obj = {yl:1,y2:2}; 

var i=1, n=2; 

for(;i<n;i++) { 
console.1log (obj['x'+i]); 


4 
如 果 读 取 undefined 对 象 的 属性 ， 则 会 出 现 属性 读 写 异 常 。 


var obj = {x:1}; 
obj.y; 
obj.y.z =2; 


可 以 先 对 对 象 进行 判断 ， 再 访问 其 属性 ， 比 如 : 


if( obj.y) { 
Var yz = obj.y.2; 


} 


3.3.3 ”删除 属性 


delete 运算 符 用 来 删除 一 个 属性 的 定义 ，delete 的 返回 值 不 是 表示 删除 成 功 了 ， 而 是 表示 
没有 这 个 属性 了 。 例 如 : 


Var obj = new Object() 7 

obj .name='zs'7 

delete obj .name;// 输出 true 
obj .name;// 输出 undefined 
delete obj .name// 输 出 true; 


delete 只 是 断 开 属性 和 宿主 对 象 的 联系 ， 而 不 会 在 内 存 中 删除 该 属性 。 比 如 : 


var a = {}; 

a = Ul 2s 

var c= a.b; 

delete a.b; 
console.1log(c.x);// 输 出 1 
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3.3.4 检测 属性 


有 时 我 们 需要 对 属性 做 一 些 检测 ， 比 如 对 象 是 否 拥有 某 个 属性 ， 这 个 属性 是 对 象 自己 的 
还 是 原型 对 象 的 ， 这 个 属性 是 否 可 以 枚 举 等 。 

属性 不 仅 包含 标识 它们 可 枚 举 的 特性 ， 还 包括 它们 是 否 可 写 、 可 配置 的 特性 。 可 枚 举 特 
性 控制 着 当 使 用 forin 遍历 对 象 的 属性 时 是 否 可 以 过 历 该 属性 ， 可 配置 特性 控制 着 其 他 特性 
(包括 属性 是 否 可 以 删除 ) 的 修改 。 比 如 : 


Var cat = new Object(); 





cat.legs = 4; 

cat.name = "tom"; 

'legs' in cat;//true 

"abc' in cat;//false 

"toString" in cat;//true 
cat.hasOwnProperty('legs');//true 
cat.hasOwnProperty('toString');//false 

cat .propertyIsEnumerable('legs');//true 
cat.propertyIsEnumerable('toString');//false 


如 果 想 查看 属性 是 否 可 枚 举 、 可 写 、 可 配置 ， 可 以 使 用 Object.getOwnPropertyDescriptor() 
得 到 对 属性 的 描述 信息 。 属 性 的 可 枚 举 、 可 写 、 可 配置 默认 情况 下 都 是 false。 它 的 语法 为 : 

Object .getOwnPropertyDescriptor (obj, prop) 

如 果 想 设置 属性 的 可 枚 举 、 可 写 、 可 配置 ， 可 以 使 用 defineProperty， 它 的 语法 是 : 


Object .defineProperty (obj, prop, descriptor) 


第 一 个 参数 是 需要 定义 属性 的 对 象 ， 第 二 个 参数 是 需要 被 定义 或 修改 的 属性 名 ; 第 三 个 


var a = {x:1}; 

Object .getOwnPropertyDescriptor (a, 'x'); 

Object .defineProperty (a, 'y', {value:2,writable:false,enumerable:false, 
configurable:true}); 

aLy= 3; 

a.y?// 输 出 2 

Object.defineProperty (a, 'y', {value:3,writable:false}); 

a.y; // 输 出 3 


3.3.5 ”JavaScript 数组 





数组 是 值 按 一 定 顺序 排列 的 集合 ， 每 个 值 叫做 一 个 元 素 ， 用 每 个 元 素 的 数字 编号 表示 元 
素 在 数组 中 的 位 置 ， 也 就 是 索引 。 第 一 个 元 素 的 索引 是 0， 最 大 可 能 的 索引 为 4294 967 294。 
JavaScript 中 的 数组 是 弱 类 型 的 , 数组 中 可 以 含有 不 同类 型 的 元 素 。 数 组 元 素 甚至 可 以 是 对 象 
或 其 他 数组 。 
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既 可 以 通过 字面 量 创建 数组 ， 也 可 以 通过 构造 函数 创建 数组 。 比 如 : 


var emptty = []; 


Var a = new Array(); 


Var a=new Array(l,null,undefined, true, 'testing', {x:1}, [2,3,4]} 
Var a=new Array(10); 


请 注意 最 后 一 行 代码 是 创建 了 一 个 数组 并 指定 长 度 , 并 不 是 创建 了 只 包含 元 素 10 的 数组 。 

我 们 可 以 使 用 索引 对 数组 的 元 素 进行 读 和 写 ， 使 用 方 括号 运算 符 时 ， 方 括号 中 是 一 个 返 
回 非 负 整 数值 的 任意 表达 式 。 同 时 数组 的 长 度 是 动态 改变 的 ， 也 就 是 length 属性 会 根据 数组 
的 元 素 个 数 进 行 自动 更 新 。 比 如 


var ETE 三 2 37 5] 


arr[lll?//2 
arr.length;//5 
arr[5] = 6; 
arr.length;//6 
delete arr[0]; 


arr[0];//undefined 








数组 有 许多 常用 的 属性 和 方法 ， 具 体 见 表 3-5。 


表 3-5 数组 的 常用 属性 和 方法 























属性 或 方法 说 ”了 明 

length 属性 用 来 获取 数组 的 长 度 。 数 组 的 位 置 同样 是 从 0 开始 的 

toString 方法 将 数组 转换 为 字符 串 

contact 方法 用 于 连接 两 个 或 多 个 字符 串 

push 方法 在 数组 的 末端 添加 一 个 或 多 个 元 素 ， 并 返回 添加 后 的 数组 的 长 度 

pop 方法 用 于 删除 数组 的 最 后 一 个 元 素 ， 并 返回 该 元 素 

join 方 法 以 参数 作为 分 隔 符 ， 将 所 有 数组 成 员 组 成 -个 字符 串 返 回 。 如 果 不 提供 参 
数 ， 默 认 用 逗号 分 隔 

shift 方法 用 于 删除 数组 的 第 一 个 元 素 ， 并 返回 该 元 素 

unshift 方法 在 数组 的 第 一 个 位 置 添 加 元 素 ， 并 返回 添加 新 元 素 后 的 数组 长 度 

reverse 方法 用 于 颠倒 数组 中 元 素 的 顺序 ， 使 用 这 个 方法 以 后 ， 返 回 改变 后 的 原 数组 
返回 指定 位 置 的 数组 成 员 组 成 的 新 数组 ， 原 数组 不 变 。 它 的 第 一 个 参数 为 

slice 方法 起 始 位 置 (从 0 开始 )， 第 二 个 参数 为 终止 位 置 (但 该 位 置 的 元 素 本 身 不 包括 
在 内 ) 
于 删除 元 素 ， 并 可 以 在 被 删除 的 位 置 添加 新 的 数组 元 素 。 它 的 返回 值 是 

splice 方法 被 删除 的 元 素 。 需 要 特别 注意 的 是 ， 该 方法 会 改变 原 数 组 。 它 的 第 一 个 参 
数 是 删除 的 起 始 位 置 ， 第 二 个 参数 是 被 删除 的 元 素 个 数 

jolt 方法 该 方法 对 数组 元 素 进行 排序 ， 默 认 是 按照 字典 顺序 排序 。 排 序 后 ， 原 数组 


下 面 的 例子 使 用 了 数组 的 属性 和 方法 : 


Var cities = new Array("shandong", "henan", "gz"); 
console.log (cities.length);//3 
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console.log(cities.toString());//shandong, henan,gz 
cities.length -= 1; 
console.log(cities);// shandong,henan 


var arr = []; 
arr[0] = 1; 
arr[1] = 2; 
arr.push(3) 
arrs//[1,2,3] 


arr[arr.length] = 4; 
arr;// [1,2,3;,4] 


arr.unshift (0); 
arr//[0,1,2,3,4] 

delete arr[2]; 
arr;//[0,1,undefined, 3,4] 
arr.length;//5 
arr.pop();//4 returned 
arr;//[0,1,undefined, 3] 
arr.shift(); 

arr;//[l1, undefined, 3] 


Wi = a Be "eis 
a.reverse() // ["c", "b", "a"] 
A ere Tb man 

和 SORE 人 ETEa "pb" “e"] 
人 


3.3.6 JavaScript 内 置 对 象 


JavaScript 实际 上 预定 义 了 若干 原生 构造 函数 ， 共 包括 9 个 原生 对 象 的 构造 函数 ， 包 括 
Number0、StringO0、Boolean0、ObjectO0、Aray0O、Function0、Date0、MathO0、RegExpO、ErrorO 。 
由 于 在 前 文中 已 经 介绍 过 一 些 内 置 对 象 ， 下 面 重 点 介绍 Date0、Math0、RegExpO0、Error0。 

1. Date 对 象 


Date 对 象 是 JavaScript 提供 的 日 期 和 时 间 的 操作 接口 。 通 过 Date 对象 既 可 以 得 到 本 地 时 
间 ， 也 可 以 得 到 UTC 时 间 ( 国 际 统一 时 间 )， 还 可 以 单独 处 理 年 、 月 、 日 等 信息 。 例 如 : 


var tl = new Date() 

Var t2 = new Date("Jun 7,2013 11:23:20"); 

var t3 = new Date(1362790014000); 

console.log(t3);// 输出 Sat Mar 09 2013 08:46:54 GMT+0800 (中 国标 准时 间 ) 
console.log(t3.toUTCString() ) ;// 输 出 Sat，09 Mar 2013 00:46:54 GMT 
console.1log(t3.toLocaleString());// 输出 2013/3/9 上 午 8:46:54 





2. Math 对 象 
在 进行 数学 计算 的 时 候 ， 可 以 使 用 Math 对 象 ， 它 提供 一 系列 数学 常数 和 数学 方法 。 该 
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对 象 不 是 构造 函数 ， 所 以 不 能 生成 实例 ， 所 有 的 属性 和 方法 都 必须 在 Math 上 调用 。 比 如 : 


new Math () // TypeError: object is not a function 
Math.E // 算 术 常 量 e， 即 自然 对 数 的 底数 //2.718281828459045 
Math .LN2// 返 回 2 的 自然 对 数 0.6931471805599453 

Math .LN10// 返 回 10 的 自然 对 数 2.302585092994046 

Math .LOG2E// 返 回 以 2 为 底 的 e 的 对 数 1.4426950408889634 
Math .LOG10E// 返 回 以 10 为 底 的 e 的 对 数 0.4342944819032518 
Math .PI// 返 回 圆周 率 3.141592653589793 

Math.SQRT2 // 返 回 2 的 平方 根 1.4142135623730951 




















其 中 常用 的 方法 见 表 3-6: 
表 3-6 ”Math 对 象 的 常见 方法 
四 -法 说 了 明 
round 四 舍 五 入 
abs 返回 参数 值 的 绝对 值 
max 返回 最 大 的 参数 
min 返回 最 小 的 参数 
floor 小 于 参数 值 的 最 大 整数 
ceil 返回 大 于 参数 值 的 最 小 整数 
random 返回 0 到 1 之 间 的 一 个 伪 随机 数 ， 可 能 等 于 0， 但 是 一 定 小 于 1 
三 角 函 数 sin 方法 返回 参数 的 正弦 ，cos 方法 返回 参数 的 余弦 ，tan 方法 返回 参数 的 正切 


3. RegExp 对 象 

JavaScript 中 也 有 正则 表达 式 ， 使 用 起 来 和 其 他 语言 的 正则 表达 式 类 似 。 正 则 表达 式 
(regular expression) 是 一 种 表达 文本 模式 的 方法 ， 常 常用 作 按照 “给 定 模式 ”匹配 文本 的 工具 ， 
比如 给 定 一 个 email 地 址 的 模式 ， 然 后 用 来 确定 一 个 字符 串 是 否 为 email 地 址 。 

新 建 正 则 表达 式 有 两 种 方法 。 一 种 是 使 用 字面 量 ， 以 斜 杠 表示 开始 和 结束 。 

语法 是 : 

/pattern/attributes 


例如 : 

Var regex = /xyz/; 

另 一 种 是 使 用 RegExp 构造 函数 。 语 法 是 : 
new RegExp (pattern, attributes) 
例如 : 

Var regex = new RegExp ("xyz"); 


上 面 两 种 写法 是 等 价 的 ， 都 建立 了 一 个 内 容 为 xyz 的 正则 表达 式 对 象 ， 其 中 修饰 符 
(attributes) 包 括 i、g、m。i 表示 执行 对 大 小 写 不 敏感 的 匹配 ，g 表示 执行 全 局 匹配 (查找 所 有 
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匹配 而 非 在 找到 第 一 个 匹配 后 停止 )，m 表示 执行 多 行 匹配 。 


Var regex = new RegExp ("xyz"，"i");// 等 价 于 var regex = /xyz/i; 


这 两 种 写法 在 运行 时 有 一 处 细微 的 区 别 。 采 用 字面 量 写法 的 正则 对 象 在 代码 载 入 时 ( 即 编 
译 时 ) 生 成 ; 采用 构造 函数 写法 的 正则 对 象 在 代码 运行 时 生成 。 考 虑 到 书写 的 便利 和 直观 ， 实 
际 应 用 中 ， 基 本 上 都 采用 字面 量 的 写法 。 

正则 表达 式 作 为 对 象 有 如 下 属性 : 


ignoreCase: 返回 一 个 布尔 值 ， 表 示 是 否 设 置 了 i 修饰 符 ， 该 属性 只 读 。 

global: 返回 一 个 布尔 值 ， 表 示 是 否 设置 了 g 修饰 符 ， 该 属性 只 读 。 

lastIndex: 返回 下 一 次 开始 搜索 的 位 置 。 该 属性 可 读 写 , 但 是 只 在 设置 了 g 修饰 符 时 
有 意义 。 

source: 返回 正则 表达 式 的 字符 串 形 式 (不 包括 反 斜 杠 )， 该 属性 只 读 。 

multiline: 返回 一 个 布尔 值 ， 表 示 是 否 设置 了 m 修饰 符 ， 该 属性 只 读 。 


正则 表达 式 对 象 常用 的 方法 包括 test 方法 和 exec 方法 ，test 方法 返回 布尔 值 ， 用 来 验证 
字符 串 是 否 符合 某 个 模式 。 如 果 正 则 表达 式 带 有 g 修饰 符 ， 则 每 一 次 test 方法 都 从 上 一 次 结 
束 的 位 置 开始 向 后 匹配 。 例 如 : 


var r = /x/g; 
var s=" x Xx'; 


站 RM 本 本 各 条 


lastIndex // 0 
test (5) // true 
lastIndex // 2 
test(s) // true 
lastIndex // 4 
test(s) // false 


相 比 较 test 方法 ，exec 方法 则 是 返回 匹配 结果 。 例 如 : 


Var 号 三 


= " x xX"; 


Var rl = /x/; 
var r2 = /y/; 
rl.exec(s) // ["x"] 
r2.exec(s) // null 


上 面 几 行 代码 表示 ， 如 果 匹 配 成 功 ，exec 方法 返回 一 个 数组 ， 里 面 是 匹配 结果 。 如 果 匹 
配 失败 ， 返 回 null。 

当 我 们 需要 搜索 一 个 比 直接 匹配 需要 更 多 条 件 的 匹配 时 ， 比 如 寻找 一 个 或 多 个 bc, 那么 
这 时 模式 将 要 包含 特殊 字符 。 比 如 ， 模 式 /ab*c/ 匹 配 了 一 个 单独 的 a 后 面 跟 了 零 个 或 多 个 b(* 


的 意思 


是 前 面 一 项 出 现 了 零 个 或 多 个 )， 且 后 面 跟着 的 任何 字符 组 合 。 在 字符 串 


“cbbabbbbcdebc” 中 ， 这 个 模式 匹配 了 子 字符 串 “abbbbc”。 表 3-7 列 出 了 一 个 在 正则 表达 
式 中 可 以 利用 的 特殊 字符 的 完整 列表 和 描述 。 
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表 3-7 正则 表达 式 中 的 特殊 字符 


合 义 


对 于 其 后 的 平常 被 当 作 字 面 量 的 字符 ， 将 
其 转 义 为 特殊 字符 ; 对 于 其 后 的 特殊 字符 ， 
将 其 转 义 为 字面 量 


例子 

轴 / 匹 配 了 字符 b。 通 过 在 b 的 前 面 放 一 个 反 斜 
杠 ， 即 用 作 Ab/， 这 个 字符 变 成 了 一 个 特殊 意义 
的 字符 ， 意 思 是 匹配 一 个 词 的 边界 ; 

* 是 一 个 代表 着 前 一 项 0 次 或 多 次 发 生 时 将 会 被 
匹配 的 特殊 字符 ， 比 如 ，/a*/ 代 表 会 匹配 0 个 或 
多 个 a。 为 了 匹配 * 号 直接 量 ， 在 它 的 前 面 加 一 
个 反 斜 杜 ， 比 如 ，/aW*/ 匹 配 a* 





n 是 一 个 正 整 数 , 匹配 前 面 
生 了 n 次 


-个 字符 刚好 发 


/af23/ 不 会 匹配 “candy” 中 的 'a， 但 是 
“caandy” 中 所 有 的 'a, 以 及 “caaandy” 
两 个 'a' 1 


会 匹配 
中 的 前 





n 和 m 都 是 正 整数 -匹配 前 面 的 字符 至 少 na 
次 ,最 多 四 次 。 如 果 n 或 m 的 值 是 0， 这 
个 值 被 名 略 
匹配 任何 除了 新 
字符 


- 行 开头 字符 的 任何 单个 


匹配 前 一 个 字符 0 次 或 多 次 
匹配 前 面 
同 的 效果 
匹配 前 面 
相同 的 效果 
匹配 输入 的 开始 。 如 果 多 行 标识 被 设置 为 
true， 同 时 匹配 换行 后 紧 跟 的 字符 

匹配 输入 的 结束 ， 如 果 多 行 标识 被 设置 为 
true， 同 时 会 匹配 换行 前 紧 跟 的 字符 
匹配 一 个 词 的 边界 。 一 个 词 的 边界 就 是 一 
个 词 不 被 另 一 个 词 跟随 的 位 置 或 者 不 是 另 
-个 词汇 字符 前 边 的 位 置 。 注 意 ， 一 个 匹 
配 的 词 的 边界 并 不 包含 在 匹配 的 内 容 中 。 
换 名 话说， 一 个 匹配 的 词 的 边界 的 内 容 的 
长 度 是 0 


个 字符 1 次 或 多 次 , 和 {1,} 有 相 


-个 字符 0 次 或 1 次 ， 和 {0,1} 有 








/afl, 3 并 不 匹配 “cndy” 中 的 任意 字符 ， 但 匹 
配 “candy” 中 的 'a, 匹配 “caandy” 中 的 前 两 个 
'a， 也 匹配 “caaaaaaandy” 中 的 前 三 个 'a 


/bo*/ 会 匹配 “A ghost boooooed” 中 的 boooo 和 
“A bird warbled” 中 的 只， 但 是 在 “A goat 
gmunted” 中 将 不 会 匹配 任何 东西 

/at/ 匹 配 了 “candy” 中 的 a 和 “caaaaaaandy” 中 
所 有 的 'a" 

/e?le?/ 匹 配 “angel” 中 的 'e 和 “angle” 中 的 ne 
人 AAA/ 并 不 会 匹配 “an A” 
“AnE” 中 的 'A' 

/t$/ 并 不 会 匹配 “eater” 
“eat” 中 的 *t 


中 的 'A'， 但 是 会 匹配 


中 的 中， 但 是 会 匹配 
Abmy 匹 配 “moon” 中 的 'm'; 


/ooWb/ 并 不 匹配 “moon” 中 的 'o0'"， 因 为 '00' 被 一 
个 词汇 字符 m' 紧 跟着 





匹配 一 个 数字 ， 等 价 于 [0-9] 


Ad/ 或 [0-9]/ 匹 配 “B2 is the suite number.” 中 的 '2' 





匹配 一 个 非 数字 字符 





匹配 


-个 单字 字符 (字母 、 数 字 或 下 划 线 ) 


Aw/ 匹 配 “apple,” 中 的 3'、“$5.28,” 中 的 '5' 和 








匹配 一 个 空白 字符 ， 包 括 空格 、 制 表 符 、 
换 页 符 和 换行 符 





“3D.” 中 的 '3' 
匹配 一 个 非 单字 字符 AW/ 或 者 /[^A-Za-z0-9 ]/ 匹 配 “509%.” 中 的 "9 
Kt 配 或 地 /greenked/ 匹配 “green apple” 中 的 'green 和 
“red apple ”中 的 'red' 





AW/ 或 者 /[^A-Za-z0-9_J/ 匹 配 “50%.” 中 的 '%' 
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( 续 表 ) 
例子 


\S 匹配 一 个 非 空白 字符 AW/ 或 者 /[^A-Za-z0-9 ] 匹 配 “50%6.” 中 的 9 





个 字符 集合 。 匹 配方 括号 中 的 任意 字符 。 
boyd 我 们 可 以 使 用 连接 号 (0) 来 指定 一 个 字符 范 | [abcd] 和 [a-d] 是 一 样 的。 它们 都 匹配 “brisket” 
a 围 。 对 于 点 () 和 星 号 (*) 这 样 的 特殊 符号 ， | 中 的 b， 也 都 匹配 “city” 中 的 'e 





在 一 个 字符 集中 没有 特殊 的 意义 


当 这 些 匹 配 字符 组 合 在 一 起 的 时 候 , 会 使 得 正则 表达 式 不 容易 理解 。 例 如 [^a-z] 匹 配 不 在 
'a 到 'z 范 围 内 的 任意 字符 。 正 则 表达 式 还 使 用 小 括号 来 指定 子 表达 式 (也 叫做 分 组 )， 例 如 
Cd{L3}D)13}d{L3} 是 一 个 简单 的 瑟 地 址 匹配 表达 式 。 要 理解 这 个 表达 式 ， 请 按 下 列 顺序 分 
析 它 : \d{1,3} 匹 配 1 到 3 位 的 数字 ，Cd{13}D)4} 匹 配 三 位 数字 加 上 一 个 英文 句号 (这 个 整体 
也 就 是 这 个 分 组 ) 重 复 3 次 ， 最 后 再 加 上 一 个 一 到 三 位 的 数字 Qd{1,3})。 

下 面 我 们 来 实现 登录 名 的 客户 端 验证 ， 要 求 登录 名 既 可 以 是 邮箱 地 址 也 可 以 是 手机 号 ， 
如 下 所 示 : 

// 在 教材 源 代码 中 的 yanzheng .js 中 

function checkMobile (mobile){ 


if(mobile.length != 11 || isNaN (mobile)){ 
return false; 





} 

mobile = mobile.substr(0,3); 

// 号 段 

var hd = new 
Rrrayt"130"" 13 "132"7"133" "L134" "135" 7 "136" "137" "L387 "L139 
0 a ee A te ky 6 :hh SO 
li :BY et a 

var i = hd.length; 

while (i--) { 
if (hd[i] == mobile) { 
return true; 
} 

} 

return false; 


} 
// 验 证 邮箱 是 否 正 确 ，/ /在 教材 源 代码 中 的 yanzheng .js 中 
function checkEmail (email){ 
Var reg = 
{la=zA—20—91+[_ IV INe1?)*tazA 2Z0=91+8 {la=zA—20=-9]+[ I IN 2 
[a-zA-20-9]+\. [a-zA-2Z] {2,3}$/; 
if(!reg.test (email))f{ 
return false; 
jelsei{ 
return true; 
| 
} 


var loginNameCheckOk = false; 
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var loginName = "example@163.com"; 
IfE (checkMobile (loginName) || checkEmail (loginNameCheckOk) ) 1{ 
login name checkOk = true; 


} 


4. Error 对 象 





程序 在 运行 时 经 常会 发 生 异常 ， 会 有 Error 的 实例 对 象 抛 出 ，JavaScript 中 也 需要 对 异常 
进行 处 理 。JavaScript 内 置 了 6 种 常见 的 错误 类 型 ， 如 表 3-8 所 示 。 











表 3-8 ”Error 类 型 

类 型 说 明 
InternalError 代表 JavaScript 引擎 内 部 错误 的 异常 抛 出 的 实例 ， 例 如 : “递归 太 多 ” 
RangeError 表示 错误 的 原因 : 数值 变量 或 参数 超出 其 有 效 范 围 
ReferenceError 表示 无 效 引 用 
SyntaxError 表示 语法 错误 
URIEror 给 encodeURIO 或 decodeURI0 传 递 的 参数 无 效 
EvalEror 与 eval0 函 数 有 关 





如 果 需 要 自 定义 Error 对 象 ， 就 需要 自己 创建 Error 对 象 ， 它 的 语法 是 : 
new Error (message) 
其 中 message 表示 对 错误 的 描述 信息 。 
3.3.7 ”浏览 器 对 象 
浏览 器 打开 网 页 时 的 效果 如 图 3-7 所 示 : 





location bar command system icons 
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site navigation bar grippy 








图 3-7 浏览 器 


大 部 分 JavaScript 程序 是 运行 在 浏览 器 环境 下 的 ， 因 此 浏览 器 提供 了 一 系列 对 象 用 于 与 
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浏览 器 窗口 进行 交互 。 浏 览 器 不 仅 提供 了 各 种 对 象 ， 还 提供 了 独立 于 内 容 的 描述 这 种 对 象 与 
对 象 之 间 关 系 的 模型 (BOM)， 该 模型 如 图 3-8 所 示 。 




















TI 





location 
















navigator 


















location 








图 3-8 BOM 


从 图 3-8 中 可 以 看 到 ，window 对 象 是 BOM 的 顶层 对 象 。window 对 象 表示 整个 浏览 器 
窗口 , 它 就 是 JavaScript 运行 时 的 宿主 对 象 , 所 以 在 浏览 器 窗口 下 执行 window 对 象 的 属性 和 
方法 是 不 需要 特别 指明 的 。 可 以 把 那个 窗口 的 属性 作为 全 局 变量 来 使 用 。 例 如 ， 可 以 只 写 
document， 而 不 必 写 window.document。 同 样 ， 可 以 把 当前 窗口 对 象 的 方法 当成 函数 来 使 用 ， 


window 对 象 提供 的 open 方法 可 以 打开 一 个 新 的 浏览 器 窗口 或 查找 一 个 已 命名 的 窗口 。 
它 的 语法 是 ; 
window.open([url] [.target] [,options]) 


第 一 个 参数 是 一 个 可 选 的 字符 串 ， 声 明了 要 在 新 窗口 中 显示 的 文档 的 URL。 如 果 省 略 
了 这 个 参数 ， 或 者 它 的 值 是 空 字符 串 ， 那 么 新 窗口 就 不 会 显示 任何 内 容 。 第 二 个 参数 也 是 一 
个 可 选 的 字符 串 ， 声 明了 新 窗口 的 名 称 ， 浏 览 器 提供 了 一 些 有 用 的 值 ， 比 如 _blank( 在 新 窗口 
中 打开 )、_self 蔡 换 当 前 页 面 打开 )。 比 如 : 


<html> 

<head> 

<script type="text/javascript"> 

function open win() 

{ 

window.open ("http://www.w3school.com.cn"," blank","toolbar=yes, 
location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, 
resizable=no, copyhistory=yes, width=400, height=400") 

} 

</script> 

</head> 

<body> 

<form> 

<input type="button" value=" 打 开 窗 口 " onclick="open win()"> 
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</form> 
</body> 
</html> 


如 果 想 关闭 当前 窗口 ， 可 使 用 window.close(。 
此 外 还 有 定时 器 函数 setmterval0 和 setTimeout0 方 法 , setInterval0 方 法 可 以 每 隔 一 段 时 间 
复 执行 代码 ，setTimeout0 方 法 能 在 一 段 时 间 之 后 执行 指定 的 代码 。 它 们 的 语法 分 别 为 : 


setInterval (code,millisec) 








setTimeout (code,millisec) 


在 HIML5 中 ，window 对 象 新 增 了 两 个 对 象 : localStorage 和 sessionStorage 对 象 。 这 两 
个 对 象 都 能 在 客户 端 存储 数据 ， 这 解决 了 cookie 不 适合 存储 大 量 数据 的 问题 。 
localStorage 在 本 地 长 期 保存 一 个 站 点 的 公共 变量 。 例 如 : 


<!DOCTYPE html> 
<html> 
<body> 
<script type="text/javascript"> 
if (localStorage.pagecount) 
t 
localStorage .pagecount=Number (localStorage.pagecount) +1; 
} 
else 
{ 
localSstorage .pagecount=1; 
} 
document .write ("Visits: " + localStorage.pagecount + " time(s)."); 
</script> 
<p> 刷 新 页 面 会 看 到 计数 器 在 增长 。</p> 
<p> 请 关闭 浏览 器 窗口 ， 然 后 再 试 一 次 ， 计 数 器 会 继续 计数 。</p> 
</body> 
</html> 


sessionStorage 针对 一 个 session 进行 数据 存储 。 当 用 户 关 闭 浏览 器 窗口 后 ， 数 据 会 被 删 
除 。 例 如 : 


<!DOCTYPE html> 

<html> 

<body> 

<script type="text/javascript"> 
if (sessionStorage .pagecount) 
{ 
sessionStorage .pagecount=Number (sessionStorage.pagecount) +1; 
} 
slss 
{ 
sessionStorage.pagecount=1; 


. 


document .write ("Visits " + sessionStorage.pagecount + " time(s) this session."); 
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</script> 

<p> 刷 新 页 面 会 看 到 计数 器 在 增长 。</p> 

<p> 请 关闭 浏览 器 窗口 ， 然 后 再 试 一 次 ， 计 数 器 已 经 重 置 了 。</p> 
</body> 

</html> 


对 于 不 同 的 网 站 ， 数 据 存储 于 不 同 的 区 域 ， 并 且 一 个 网 站 只 能 访问 其 自身 的 数据 。 
document 对 象 代表 HTML 文档 , 每 个 载 入 浏览 器 的 HIML 文档 都 会 成 为 document 对象。 








它 使 我 们 可 以 从 脚本 中 对 HTML 页 面 中 的 所 有 元 素 进行 访问 。 例 如 , 对 于 下 面 的 HTML 代码 : 


<html> 

<head></head> 

<body> 

<img src = "logo.gif" name = "logo"/> 

<form method="post" action="" name="data"> 
<input type="email" name="txtEmail" /> 
<input type="submit" value=" 提 交 "/> 

</form> 

</body> 

</html> 


我 们 可 以 使 用 document.body 查看 整个 body 标签 中 的 内 容 , 如 果 要 访问 name 属性 为 logo 


的 img 图 像 , 可 使 用 documentimages["logo"]。 一 些 常用 的 document 对 象 的 属性 如 表 3-9 所 示 。 


表 3-9 document 对 象 的 属性 





属 性 说 ”了 明 
domain 返回 当前 文档 的 域名 
cookie 设置 或 返回 与 当前 文档 有 关 的 所 有 cookie 
forms 返回 对 文档 中 所 有 Form 对 象 的 引用 
lastModified 返回 文档 被 最 后 修改 的 日 期 和 时 间 
links 返回 对 文档 中 所 有 Area 和 Link 对 象 的 引用 
URL 返回 当前 文档 的 URL 
images[] 返回 对 文档 中 所 有 Image 对 象 的 引用 
all 提供 对 文档 中 所 有 HTML 元 素 的 访问 


为 了 操作 HTML 文档 中 的 各 种 元 素 ，document 对 象 提供 了 一 些 常用 的 方法 。 首 先是 
document getElementById0， 它 只 有 一 个 参数 : 我 们 想 获得 的 那个 元 素 的 id 属性， 这 个 id 值 
必须 放 在 单 引号 或 双 引 号 里 ， 它 返回 的 是 一 个 对 象 。 还 有 与 之 对 应 的 getElementsByName() 
方法 ， 它 的 唯一 参数 是 想 要 查询 的 元 素 的 name 属性 ， 所 有 getElementsByName0 方 法 返回 的 
是 元 素 的 数组 。 此 外 ，getElementsByTagName() 方 法 的 使 用 率 也 挺 高 ， 它 也 只 有 一 个 参数 : 
元 素 的 名 字 。 它 返回 一 个 对 象 数组 ,每 个 对 象 分 别 对 应 着 文档 里 具有 给 定 标签 名 的 一 个 元 素 。 


例如 : 


<html> 
<head> 





<script type="text/javascript"> 
function getValue () 
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{ 
Var x=document .getElementById ("myHeader") 
alert (x.innerHTML) 
} 
function getElements () 
{ 
Var x=document .getElementsByName ("myInput"); 
alert (x.length); 
Var y=document .getElementsByTagName ("input"); 
alert (y.length); 
} 
</script> 
</head> 
<body> 
<hl id="myHeader" onclick="getValue()">This is a header</h1> 
<p>Click on the header to alert its value</p> 
<input name="myInput" type="text" size="20" /><br/> 
<input name="myInput" type="text" size="20" /><br/> 
<input name="myInput" type="text" size="20" /><br/> 
<br/> 
<input type="button" onclick="getElements()" 
value="How many input elements?" /> 
</body> 
</html> 


3.4 ”JavaScript 畏 数 


在 JavaScript 中 ， 函 数 也 是 对 象 ， 函 数 拥有 属性 。 它 可 以 存在 于 一 个 变量 、 数 组 或 对 象 
中 ， 并 可 以 作为 参数 传递 给 函数 并 由 函数 返回 。 


3.4.1 创建 函数 
创建 函数 有 三 种 方式 : 函数 声明 、 函 数 表 达 式 和 Function 构造 函数 。 
函数 声明 的 语法 是 : 


function name([param[, param[, ... param]]]) { 
statements 


} 
name 是 函数 名 ，param 是 参数 的 名 称 。 一 个 函数 最 多 可 以 有 255 个 参数 。statements 是 
函数 表达 式 的 语法 是 : 


var func = function [name] ([param] [，Pparam] [..., param]) { 
statements 
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Function 构造 函数 的 语法 是 : 
[new] Function (argl, arg2, ... argN, functionBody) 


argl, arg2, .… , argN 是 构造 函数 的 参数 名 。functionBody 是 一 个 字符 串 ， 包 含 了 组 成 函数 
的 函数 体 的 一 条 或 多 条 语句 。 

下 面 的 例子 将 展示 这 三 种 方式 : 

// 函 数 构造 函数 


var addConstructor = new Function('x', 'y', "return x + y'); 
// 函数 语句 
function addStatement (x, y) { 
return x + Y7 
} 
// 函数 表达 式 
var addExpression = function(x, y) { 
return x + y; 
}; 
console.1log (addConstructor (2,2) ，addStatement (2,2), addExpression (2,2)); 
// 输 出 '4 4 4 


3.4.2 ”调用 函数 


在 调用 函数 时 ， 如 果 传 递 给 函数 的 参数 是 值 类 型 的 ， 函 数 改 变 了 这 个 参数 的 值 ， 这 样 的 
改变 不 会 影响 函数 外 部 。 如 果 函 数 的 参数 是 一 个 对 象 ， 函 数 改 变 了 对 和 象 的 值 ， 这 样 的 改变 对 
函数 外 部 是 可 见 的 ， 比 如 下 面 的 例子 : 


var number = 2; 
function square(number) { 
return number * number; 
} 
square (2);//4 
console.1og (number) ;//2 
function myFunc (theObject) { 
theObject .make = "奔驰 "; 
} 
var mycar = {make: "宝马 "，model: "自动 挡 "，year: 1998}， 


XxX, 

和 
x = mycar.make; // x 为 "宝马 " 
myFunc (mycar); 
y = mycar.make; // Y 为 "奔驰 " 


如 果 重 新 给 参数 分 配 一 个 对 象 ， 并 不 会 对 函数 外 部 有 任何 影响 ， 因 为 这 样 只 是 改变 了 函 
数 局 部 变量 的 值 ， 而 不 是 改变 了 对 象 的 一 个 属性 值 。 例 如 : 
function myFunc (theObject) { 


theObject = {make: "奔驰 "，model: "手动 挡 "， year: 2006}; 


} 
Var mycar = {make: "宝马 "，model: "自动 挡 "， year: 1998}， 
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x, 

ys 
x = mycar.make; // x 为 宝马 
myFunc (mycar); 
y = mycar.make; // x 为 宝马 


函数 实例 包括 的 属性 有 arguments( 表 示 传 递 给 函数 的 参数 的 类 数组 对 象 )、constructor( 表 
示 创 建 实例 的 构造 函数 的 引用 )。 比 如 : 

var add = function() { 

return arguments[0] + arguments[1]; 

$x 

console.log(add(4，4)); // 输出 8 

函数 实例 包括 的 方法 有 apply 和 call 方法 。 

apply 方法 的 语法 是 : 

function.apply([thisObj[,argArray]]) 

call 方法 的 语法 是 : 


function.call ([thisObj[,argl[, arg2[, [,.argN]]]]]) 


这 两 个 方法 实现 同样 的 功能 ， 即 调用 一 个 对 象 的 函数 并 将 这 个 函数 对 象 上 下 文 从 初始 的 
上 下 文 改变 为 由 thisObj 指定 的 新 对 象 ， 区 别 是 函数 调用 时 ， 参 数 传递 的 不 同 ， 前 者 传递 多 
个 参数 组 成 的 数组 ， 后 者 传递 多 个 分 开 的 参数 。 例 如 : 


Var greet = { 

runGreet: function(){ 

console.1log (this.name,arguments[0],arguments[1]); 

} 
} 
var cody = {name:'cody'}; 
var lisa = {name:'lisa'}; 
// 在 cody 对 象 上 调用 runGreet 函数 
greet.runGreet.call(cody, 'foo', 'bar'); // 输 出 'cody foo bar' 
// 在 1isa 对 象 上 调用 runGreet 函数 
greet .runGreet .apply (lisa，['foo', 'bar']); // 输 出 'lisa foo bar' 


在 函数 内 部 存在 this 关键 字 ，JavaScript 中 的 this 关键 字 有 特殊 的 含义 , 它 用 来 引用 包含 
函数 的 对 象 ， 而 不 是 函数 本 身 (使 用 new 关键 字 或 call 和 apply 的 情况 除外 )。 也 就 是 说 ，this 
的 值 基于 调用 函数 的 上 下 文 。 例 如 : 





Var ok = "ok'7 
Var obj = {ok:'I am ok '}; 
Var sayOk = function () { 


console.log(this['ok']); 
} 
obj.sayOk = sayOk; 
obj .sayOk();//I am ok 
sayOk (); //ok 
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3.4.3 ”匿名 函数 


函数 表达 式 可 以 用 来 创建 匿名 函数 ， 例 如 : 


//function () {console.1log('hi');}; // 匿名 函数 ， 但 无 法 调用 
// 创建 一 个 函数 来 执行 匿名 函数 
Var sayHi = function(f){ 
£(); // 调用 匿名 函数 
} 
// 将 匿名 函数 作为 参数 传递 
sayHi (function() {console.1log('hi');}); // 输出 'hi' 


3.4.4 ”作用 域 和 闭 包 


中 


在 书写 JavaScript 时 有 一 个 容易 忽视 的 问题 ， 在 函数 内 部 使 用 var 定义 的 变量 是 局 部 变 


而 省 略 var 时 定义 的 变量 则 是 全 局 变量 。 例 如 : 
function test(){ 
message="hi"; 
和 
test () 7 


alert (message); // "hi" 
alert (window.message); "hi" 


这 里 就 有 作用 域 的 概念 , JavaScript 中 的 作用 域 是 执行 代码 的 上 下 文 。 函数 内 定义 的 变量 


不 能 从 函数 之 外 的 任何 地 方 取得 ， 也 就 是 函数 内 部 可 以 访问 函数 运行 上 下 文 的 任何 变量 。 
例如 : 


var numl = 20, num2 = 30, name = "Tom"; 
function add() { 
return numl + num2; 
} 
add(); // 输出 50 
function getScore () { 
Var numl = 2, 
num2 = 3; 
function add() { 
return name + " scored " + (numl + num2); 
} 
return add(); 
} 
getScore(); // 输出 "Tom scored 5" 


在 JavaScript 中 查找 变量 的 值 ， 会 遵循 作用 域 的 层次 结构 。 如 果 找 不 到 该 变量 ， 就 在 父 


函数 中 查找 ， 直 到 在 全 局 作用 域 中 查找 。 例 如 : 


Var xl1 = 17 

Var Score = function() 1{ 
Var xz2 = 2; 
Var bar = function() { 
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Var xX3 = 3; 
console.log(xl + x2 + x3); 
} () ;// 马 上 执行 函数 的 写法 
}; 
score () ;// 输 出 6 
这 样 就 形成 了 作用 域 链 ， 而 且 这 种 “ 链 ” 是 由 函数 定义 时 的 位 置 确定 的 。 这 样 就 形成 了 
闭 包 , 闭 包 由 两 部 分 构成 : 函数 以 及 创建 该 函数 的 环境 。 也 就 是 定义 在 闭 包 中 的 函数 可 以 “ 记 
忆 ” 它 创建 时 候 的 环境 。 例 如 : 


var add = function (a) { 








return function (b) { 
returna+b; 
}; 
}; 
var addFive = add(5); 
alert (addFive (10));// 输 出 15 


3.5 事件 处 理 


3.5.1 浏览 器 事件 介绍 


无 论 是 GUI 还 是 Java Swing 或 NET Framework 实现 的 桌面 程序 ， 程 序 的 步骤 基本 上 都 
是 一 样 的 : 第 一 步 建立 用 户 界 面 ， 第 二 步 等 待 一 些 事情 发 生 ， 第 oir 
第 二 步 ,在 HTML 网 页 中 用 户 的 操作 产生 大 量 的 事件 , 比如 移动 或 单 击 鼠 标 、 键 盘 输入 \iPhone 
手势 等 。 如 果 没 有 事件 的 响应 能 力 ， 万 维 网 的 最 大 用 途 可 能 仅 是 显示 页 面 。 

最 早 的 浏览 器 事件 模型 是 网 景 事件 模型 ， 是 网 景 浏览 器 中 引入 的 一 个 事件 模型 ， 也 是 
多 数 网 页 开发 者 使 用 最 广泛 的 事件 处 理 模型 。 直 到 2001 年 11 月 W3C 才 真 正 为 : a 
了 标准 模型 , 这 个 模型 得 到 了 大 部 分 现代 浏览 器 的 支持 ,但 是 正 浏览 器 却 特 立 独行 地 不 支持 。 

window 常用 事件 如 表 3-10 所 示 。 


表 3-10 window 事件 

















事件 说 明 
onload 页 面 结束 加 载 之 后 触发 
onresize 当 浏览 器 窗口 被 调整 大 小 时 触发 
onunload 离开 页 面 时 触发 (浏览 器 窗口 已 被 关闭 、 使 用 前 进 或 后 退 按钮 ) 
Onerror 在 错误 发 生 时 运行 的 脚本 
onhaschange 当 文 档 已 改变 时 运行 的 脚本 
onafterprint 文档 打印 之 后 运行 的 脚本 
onbeforeprint 文档 打印 之 前 运行 的 脚本 





当 窗 口 成 为 可 见 时 运行 的 脚本 


onpageshow 
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常用 的 鼠标 事件 如 表 3-11 所 示 。 
































表 3-11 鼠标 事件 
事件 说 明 
onclick 元 素 上 发 生 鼠 标点 击 时 触发 
ondblclick 元 素 上 发 生 鼠 标 双击 时 触发 
onmousedown 当 元 素 上 按 下 鼠标 按钮 时 触发 
onmousemove 当 和 鼠标 指针 移动 到 元 素 上 时 触发 
onmouseout 当 鼠 标 指针 移出 元 素 时 触发 
onmouseover 当 鼠 标 指针 移 过 元 素 时 触发 
onmouseup 当 在 元 素 上 释放 鼠标 按钮 时 触发 
ondrag 元 素 被 拖 动 时 运行 的 脚本 
ondragend 在 拖 动 操作 末端 运行 的 脚本 
ondragenter 当 元 素 已 被 拖 动 到 有 效 拖 放 区 域 时 运行 的 脚本 
ondragleave 当 元 素 离开 有 效 拖 放 目标 时 运行 的 脚本 
ondragover 当 元 素 在 有 效 拖 放 日 标 上 正在 被 拖 动 时 运行 的 脚本 
ondragstart 在 拖 动 操作 开端 运行 的 脚本 
ondrop 当 被 拖 元 素 正 在 被 拖 放 时 运行 的 脚本 
onscroll 当 元 素 深 动 条 被 滚动 时 运行 的 脚本 


3.5.2 ”处 理事 件 的 两 种 方法 


关于 事件 模型 的 实现 和 讨论 有 许多 ，JavaScript 的 事件 模型 比较 独特 ， 它 完全 是 异步 的 。 
我 们 只 需要 简单 地 使 用 事件 处 理 函 数 注册 一 个 回调 函数 就 行 了 ， 一 旦 事件 触发 ， 那 么 这 个 处 
理 函 数 就 会 运行 回调 函数 。 这 与 线程 方式 实现 的 区 别 在 于 如 何等 待 事件 的 发 生 ， 在 线程 中 我 
们 可 能 需要 不 断 地 检查 条 件 是 否 满足 。 

JavaScript 事件 模型 分 为 两 个 阶段 :捕获 阶 段 和 冒 泡 阶段 ， 如 图 3-9 所 示 。 





目标 阶段 





图 3-9 JavaScript 事件 模型 分 为 捕获 阶段 和 冒 泡 阶段 


当 触 发 一 个 事件 时 ， 会 产生 一 个 事件 对 象 ， 事 件 对 象 首先 从 舞台 (documenb 向 下 传播 到 
目标 元 素 ， 然 后 再 从 目标 节点 上 传 到 舞台 。 前 一 个 阶段 称 为 捕获 阶段 ， 后 一 个 阶段 称 为 冒 泡 
阶段 。 
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传统 的 事件 绑 定 方式 ， 是 在 一 个 元 素 上 直接 绑 定 方法 。 例 如 : 


<body> 
<input type="button" id="bt" name="bt button" value="this is a button"> 
<script> 
Var bt = document .getElementById ("bt"); 
bt.onclick = function(e){ 
alert ("this is a alert"); 
alert (e.currentTarget .name); 
} 
</script> 
</body> 


这 是 传统 的 事件 绑 定 ， 它 非常 简单 而 且 稳定 ， 适 应 不 同 的 浏览 器 。e 表示 事件 ，this 指向 
当前 元 素 。 但 是 这 样 的 绑 定 只 会 在 事件 冒 泡 中 和 运行， 事件 捕获 中 不 运行 。 一 个 元 素 一 次 只 能 
绑 定 一 个 事件 函数 。 

W3C 中 推荐 使 用 的 事件 绑 定 是 用 addEventListener0 函 数 ， 例 如 : 

<body> 

<input type="button" id="bt" name="bt button" value="this is a button"> 
<script> 
Var bt = document .getElementById ("bt"); 
bt.addEventListener('click',function(e){ 
alert ("click once"); 
alert (e.currentTarget .name); 
},false); 
bt.addEventListener('click',function(e){ 
alert ("click twince"); 


alert (e.currentTarget .name); 
},false); 


</script> 
</body> 


如 此 的 效果 和 之 前 的 传统 绑 定 方式 是 一 样 的 ， 这 种 绑 定 同时 支持 捕获 和 冒 泡 ， 
addEventListener0 函 数 最 后 的 参数 表示 事件 处 理 的 阶段 ，false 和 true 分 别 表示 冒 泡 和 捕获 阶 
段 。 这 种 方式 最 重要 的 好 处 就 是 对 同一 元 素 的 同一 个 类 型 事件 做 绑 定 不 会 覆盖 , 会 全 部 生效 。 
比如 对 上 面 代 码 中 的 bt 元 素 再 进行 一 次 click 绑 定 ， 那么 两 次 绑 定 的 事件 处 理 函 数 都 会 执行 ， 
并 按照 代码 书写 顺序 执行 。 但 是 正 浏览 器 不 支持 addEventListener0 函 数 ， 只 在 下 9 以 上 ( 包 
括 正 9) 可 以 使 用 。 正 浏览 器 相应 地 要 使 用 attachEventO0 函 数 代替 ， 正 下 事件 绑 定 的 函数 
attachEvent0 支 持 全 系列 的 正 。 但 是 如 果 我 们 在 Chrome 等 其 他 内 核 浏 览 器 中 使 用 这 个 函数 去 
绑 定 事件 ， 浏 览 器 会 报错 。 例 如 : 





<body> 
<input type="button" id="bt" name="bt button" value="this is a button"> 
<script> 
var name = "world"; 


Var bt = document .getElementById ("bt"); 
bt.attachEvent ('onclick',function(){ 
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alert ("hello "+ this.name); 
1); 
</script> 
</body> 


attachEvent0 函 数 支持 事件 捕获 的 冒 泡 阶 段 ， 同 时 它 不 会 覆盖 事件 的 绑 定 。 正 中 事件 绑 
定 的 事件 名 与 通用 标准 不 同 , 比如 通用 的 事件 名 “click”、“mouseover” 在 正中 则 是 “onclick”、 


人 9 
onmouseover 。 








3.5.3 ”事件 对 象 


事件 对 象 通 常 在 处 理 函 数 中 使 用 ， 处 理 函 数 执行 完 之 后 ， 事 件 对 象 就 自动 消失 了 。 事 件 
对 象 代表 事件 的 状态 ， 比 如 键盘 按键 的 状态 、 鼠 标的 位 置 、 鼠 标 按钮 的 状态 。 在 正 浏览 器 中 
发 生 一 个 事件 时 ， 浏 览 器 将 会 自动 创建 一 个 名 为 “event” 的 事件 对 象 ，event 对 象 实际 上 又 
是 window 对 象 的 一 个 event 属性 ， 因 此 在 代码 中 可 以 通过 window.event 或 event 形式 来 访问 
该 对 象 。 而 在 通用 模型 中 规定 event 对 和 象 必须 作为 唯一 的 参数 传递 给 事件 处 理 函 数 。 为 了 兼 
容 这 两 种 浏览 器 方面 的 差异 ， 可 以 采用 下 面 的 方法 : 
btn.onClick = function (btnEvent){ 
btnEvent = btnEvent || window.event; 














} 


根据 事件 的 不 同类 型 , 比如 是 鼠标 事件 还 是 键盘 事件 , 就 能 访问 事件 的 相应 属性 。 表 3-12 
给 出 了 事件 的 常用 属性 。 


表 3-12 事件 的 常用 属性 























事件 说 了 明 
altKey 返回 当 事 件 被 触发 时 ，“ALT” 键 是 否 被 按 下 
shiftKe: 返回 当 事 件 被 触发 时 ，“SHIFT” 键 是 否 被 按 下 
screenX/ screenY 返回 当 事 件 被 触发 时 ， 鼠 标 在 计算 机 屏幕 上 的 坐标 
clientX/ clientY 返回 当 事 件 被 触发 时 ， 鼠 标 在 浏览 器 窗口 中 的 坐标 
ctrIKey 返回 当 事 件 被 触发 时 ，“CTRL” 键 是 否 被 按 下 
metaKey 返回 当 事 件 被 触发 时 ，“meta” 键 是 否 被 按 下 
TelatedTarget 返回 与 事件 的 目标 节点 相关 的 节点 
bubbles 返回 布尔 值 ， 指 示 事 件 是 否 是 冒 泡 事件 类 型 
target 返回 触发 此 事件 的 元 素 (事件 的 目标 节点 ) 
currentTarget 返回 其 事件 监听 器 触发 该 事件 的 元 素 
cancelable 返回 布尔 值 ， 指 示 事 件 是 否 可 取消 的 默认 动作 
timeStamp 返回 事件 生成 的 日 期 和 时 间 
type 返回 当前 Event 对 象 表示 的 事件 的 名 称 





事件 对 象 的 方法 有 preventDefault0 和 stopPropagation()。 
preventDefault0 通 知 浏览 器 不 要 执行 与 事件 关联 的 默认 动作 。 例 如 : 
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<body> 
<script type="text/javascript"> 
function stopDefault( e ) { 
if ( e && e.preventDefault 
e.preventDefault (); 
else 
window.event.returnValue = false; 


return false; 
} 
</script> 
<a href="http://www.baidu.com" id="testLink"> 百 度 </a> 
<script type="text/javascript"> 
Var test = document .getElementById('testLink'); 
test.onclick = function(e) { 
alert (' 我 的 链接 地 址 是 : ' + this.href + '， 但 是 我 不 会 跳 转 。' ) ; 
stopDefault (e); 
} 


</script> 

</body> 

stopPropagation0 表 示 不 再 派发 事件 ， 也 就 是 阻止 事件 向 上 冒 泡 。 例 如 : 
<head> 

<script> 


function doSomething (obj,evt) { 
alert (obj .id); 
Var e=(evt) ?evt:window.event; 
if (window.event) { 
e.cancelBubble=true; // IE 下 阻止 冒 泡 
} else { 
e.stopPropagation (); // 其 他 浏览 器 下 阻止 冒 泡 
} 
} 
</script> 
</head> 
<body> 
<div id="parentl" onclick="alert (this.id)" style="width:250px;background- 
color:yellow"> 
<p>This is parentl div.</p> 
<div id="childl" onclick="alert (this.id)" style="width:200px;background- 
color:orange"> 
<p>This is childl.</p> 
</div> 
<p>This is parent1l div.</p> 
</div> 
<br /> 
<div id="parent2" onclick="alert (this.id)" style="width:250px;background- 
color:cyan;"> 
<p>This is parent2 div.</p> 
<div id="child2" onclick="doSomething (this, event);" style="width:200px;background- 
color:lightblue;"> 
<p>This is child2. 阻止 冒 泡 .</p> 
</div> 
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<p>This is parent2 div.</p> 
</div> 
</body> 


运行 结果 如 图 3-10 所 示 。 





图 3-10 运行 结果 


图 3-10 中 的 第 一 部 分 代码 会 输出 childl 和 parentl, 第 二 部 分 代码 调用 了 stopPropagation() 
函数 ， 结 果 就 是 只 输出 child2。 

下 面 我 们 来 实现 首页 的 滚动 条 功能 ， 这 里 需要 使 用 函数 setInterval 让 div 向 左 循环 滚动 ， 
当 鼠 标 移 动 上 去 的 时 候 停 止 滚动 ， 这 时 需要 clearInterval 清除 滚动 效果 。 代 码 如 下 : 





<html> 

<head> 

<meta charset="utf-8" /> 
<title> 人 人 微 博 </title> 


<link rel="stylesheet" href="styles/index.css" /> 
<script src="scripts/index.js"></script> 
<script src="scripts/move.js"></script> 
<==[i£f Tt TE9]> 
<script 
src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6/html5shiv.min.js"> 
</script> 
<![endif]--> 
<script type="text/javascript"> 
function scrolls (obj){ 

Var num= (obj.scrollLeft)++; 

if (obj .scrol1Left==num) { 

obj .innerHTML+=ob]j . innerHTML 7 

} 

if(obj.scrollLeft>=obj.firstChild.offsetWidth)obj.scrollLeft=0; 
} 
window.onload=function(){ 
Var myMar=setInterval ("scrolls (document .getElementById('gundong'))",20); 
document .getElementById('gundong') .onmouseover=function(){ clearInterval( 

myMar) }; 
document .getElementById('gundong') .onmouseout=function(){ myMar=setInterval 
("scrolls (document .getElementBylId('gundong'))",20) }; 

} 
</script> 
</head> 


<body> 
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<div id="gundong"> 
<span> 深 动 文字 消息 gnbsp; gnbsp; 
最 扯 分 手 理 由 有 哪些 snbsp; gnbsp; 
第 三 届 微 小 说 大 赛 snbsp; gnbsp; 
在 天 津 第 六 天 了 gnbsp; gnbsp; 
红军 哥哥 ? </span> 
</div> 





</body> 
</html> 


本 章 小 结 


本 章 介绍 了 JavaScript 语言 的 基础 语法 ， 还 介绍 了 一 些 概念 和 术语 : 数组 、 函 数 、 表 达 
式 、 原 型 链 、 闭 包 等 。 这 些 概念 现在 还 不 太 容易 理解 ， 本 章 提供 了 相应 的 示例 帮助 我 们 理解 。 
如 果 我 们 对 对 象 的 理解 还 不 够 深入 ， 别 着 急 。 后 面 的 章节 会 使 用 JavaScript 的 框架 (GQuery) 完 
成 功能 ， 它 简化 了 开发 者 使 用 JavaScript 的 习惯 。 

本 章 还 介绍 了 非常 有 用 的 浏览 器 事件 模型 ， 学 习 了 JavaScript 事件 如 何 运作 ， 还 了 解 了 
不 同 浏览 器 绑 定 事件 的 不 同方 法 。 下 一 章 我 们 将 学 习 如 何 使 用 JavaScript 进行 图 形 界面 开发 。 


本 章 练习 





1. JavaScript 是 一 门 什么 样 的 语言 ， 它 有 哪些 特点 ? 
下 面 的 程序 输出 什么 ? 

1 && 3 

0 && 3 


定义 一 个 含 多 个 参数 的 Log 方法 ， 让 它 代 理 console.log 方法 。 
. 希望 获取 页 面 中 所 有 的 checkbox 该 怎么 做 ? 


D 


大 
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在 基于 HTMLS5 的 Web 应 用 中 ， 我 们 可 以 使 用 JavaScript 图 形 方面 的 知识 开发 有 趣 的 游 
戏 。HTMLS 提供 的 新 标签 允许 我 们 做 更 多 的 互动 和 动画 。 我 们 会 展示 一 个 弹力 球 游戏 ， 玩 
家 可 以 改变 球 的 水 平和 垂直 位 置 ， 通 过 这 个 例子 来 说 明 如 何 生成 动画 场景 。 


本 章 内 容 : 

掌握 canvas 元 素 的 基础 知识 

使 用 canvas 绘制 图 形 和 文本 

使 用 canvas 绘制 图 像 

如 何 使 用 canvas 开发 HIMLS 游戏 


4.1 走 进 canvas 的 世界 


4.1.1 canvas 是 什么 


HTML5 元 素 增 加 了 一 个 核心 元 素 一 一 canvas( 夯 布 )， 它 不 是 一 个 插件 ， 而 是 HTMLS5 的 
原生 标记 。canvas 元 素 不 需要 任何 插件 就 能 够 运行 2D 甚至 3D 动画 。 在 canvas 元 素 中 进行 
绘画 ， 它 会 创建 一 个 矩形 区 域 ， 我 们 可 以 添加 图 片 、 线 条 、 文 字 ， 当 然 也 可 以 在 里 面 绘 图 。 
默认 情况 下 , 该 矩形 区 域 的 宽度 为 300 像素 , 高 度 为 150 像素 , 用 户 还 可 以 自 定义 设置 canvas 
元 素 的 各 种 特性 。 


4.1.2 在 页 面 中 放置 canvas 元 素 


HTML 页 面 中 的 最 基本 的 canvas 元 素 代 码 如 下 所 示 ; 


<cavas id="cvs"></canvas> 





我 们 增加 了 一 个 id 属性 ， 一 般 情况 下 需要 通过 id 属性 来 快速 查找 该 canvas 元 素 ， 因 为 
如 果 没 有 id 属性 ， 我 们 就 很 难 操作 canvas 元 素 。 本 章 将 在 canvas 画布 中 实现 一 个 小 游戏 一 
一 弹力 球 游戏 ， 界 面 如 图 4-1 所 示 。 
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游戏 中 方块 和 小 球 不 断 下 落 ， 玩 家 的 任务 就 是 保持 小 球 不 落地 ， 玩 家 需要 使 小 球 不 断 跳 


跃 ， 当 方块 移出 屏幕 后 ， 就 会 得 到 一 定 的 分 数 。 通 过 这 个 小 游戏 ， 我 们 来 学 习 动画 和 游戏 制 
作 的 原理 和 基础 知识 。 游 戏 中 都 会 有 一 个 主 循环 ， 它 不 断 地 泻 染 画布 ， 我 们 才能 看 到 连贯 流 
畅 的 画面 。 动 态 画 面 每 秒 钟 展现 的 帧 数 称 为 帧 速 ， 它 的 单位 是 帧 / 秒 (fps)。 既 可 以 使 用 
setTimeout 函数 ， 也 可 以 使 用 setInterval 函数 。 代 码 如 下 : 





// 帧 速 
var frameSpeed = 25; 
setTimeout (gameProcess,1000/frameSpeed); 
function gameProcess() { 
update (); 
draw(); 
setTimeout (gameProcess, 1000/frameSpeed); 
} 
// 或 者 使 用 setInterval 
setInterval( function() { 
update (); 
draw(); 
,1000/frameSpeed); 


update 函数 会 执行 数据 的 更 新 ，draw 函数 则 会 把 新 的 数据 绘制 到 画布 上 。 这 样 我 们 就 可 


以 周期 性 地 执行 update 函数 和 draw 函数 了 。 


首先 需要 确定 画布 的 大 小 ， 在 本 游戏 制作 中 ， 划 分 为 两 个 对 象 : 方块 和 小 球 。 方块 的 尺 


寸 相同 ， 有 不 同 的 坐标 和 颜色 ， 有 相同 的 移动 速度 ， 小 球 的 大 小 和 颜色 固定 ， 具 有 向 上 的 弹 
力 和 重力 加 速度 。 游 戏 中 还 要 考虑 小 球 与 阶梯 的 碰撞 检测 、 小 球 与 canvas 边界 的 碰撞 检测 。 
具体 游戏 设计 如 下 : 





Var hall = OOYd "0. "dy":20, "aoe "radins" 0 
VAar bar = tw :10,. "Yy":10, "color™:" #000000 “上 
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function checkBarCollision() {} 
function checkFloorCollision() {} 


ball 对 象 的 属性 有 x、y 坐标 ，dx 表示 x 方向 的 速度 ，dy 表示 y 方向 的 速度 ，ace 表示 小 
球 运动 中 的 加 速度 ，radius 表示 小 球 半 径 。 

bar 对 象 的 属性 有 x、y 坐标 ，color 表示 阶梯 颜色 。 

checkBarCollision 函数 用 来 检测 小 球 与 阶梯 的 碰撞 。 

checkFloorCollision 函数 用 来 检测 小 球 与 canvas 底部 边界 的 碰撞 。 

其 次 我 们 要 处 理 键盘 事件 ， 游 戏 中 左右 移动 和 小 球 弹 起 都 由 键盘 来 控制 。 

最 后 ， 我 们 需要 优化 游戏 的 设计 ， 根 据 得 分 的 高 低 来 设置 画面 的 帧 速 ， 这 样 就 增加 了 游 
戏 的 不 同 难度 级 别 。 

一 款 游 戏 中 需要 用 到 一 些 数学 物理 概念 、 定 律 和 公式 ， 如 果 我 们 想 踏 入 游戏 行业 ， 就 需 
要 了 解 几 何 知识 、 向 量 和 矩阵、 物理 知识 。 

下 面 的 代码 设计 了 游戏 中 的 全 局 变量 和 全 局 对 象 : 

//canvas 宽度 

var width = 300; 

// _canvas 高 度 

var height = 510; 

// 阶 梯 宽 度 

var barSizeWidth = 50; 

/ /阶梯 高 度 

var barSizeHeight = 10; 

/ /阶梯 数 组 

Var bars = new Array(); 

// 两 个 阶梯 之 间 的 距离 

var step = 40; 

// 当 前 小 球 所 在 的 阶梯 对 象 

var collidedBar = null; 

// 屏 幕 深 动 速度 

var normalSpeed = 2; 

// 初 始 小 球 对 象 

var ball = {"x":width/2,"y":height-barSizeHeight, "dx":0,"dy":normalSpeed, 


"ace™"s0, nd 10} 


// 玩 家 得 分 

Var Score = 0; 

// 方 块 颜色 数组 

Var colors = new Array(); 
// 重 力 加 速度 

var gravity = 0.5; 

// 向 上 的 速度 

Var jumpVel = 9; 

// 小 球 横向 移动 的 速度 

Var horizontalVel = 2; 
// 小 球 是 否 静 止 


Var stop = true; 
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// 帧 速 

Var frameSpeed = 25; 
// 是 否 暂停 

var gamePause = false; 
// 是 否 结束 


var isGameOver = false; 
下 面 的 任务 就 是 使 用 canvas 绘制 弹力 游戏 中 的 对 象 。 
4.1.3 canvas 坐标 


canvas 元 素 并 没有 创建 任何 可 见 内 容 ， 它 作为 一 个 容器 ， 还 需要 2D 演 染 上 下 文 来 绘制 
图 形 ，2D 演 染 上 下 文 API(2D rendmng context APD 包 含 绘图 和 图 形 操作 所 需要 的 全 部 方法 和 
丰富 功能 。 我 们 可 以 通过 canvas 元 素 访 问 和 显示 2D 泻 染 上 下 文 。 可 见 canvas 元 素 并 非 canvas 
动画 中 最 强大 的 部 分 ， 真 正 的 关键 部 分 是 2D 演 染 上 下 文 ， 这 是 我 们 真正 绘制 图 形 的 地 方 。 

2D 泻 染 上 下 文 是 一 种 基于 屏幕 的 标准 绘图 平台 。 与 其 他 2D 平台 类 似 ， 它 采用 平面 的 笛 
卡 儿 坐标 系统 ， 左 上 和 角 为 原点 (0.0)。 向 右 移动 时 ，x 坐标 值 会 增加 ; 向 下 移动 时 ，y 坐标 值 会 
增加 。 如 果 我 们 想 把 图 形 绘制 到 正确 的 位 置 上 ， 一 定 要 理解 这 个 坐标 系 。 如 图 4-2 所 示 。 


{0,0) X 














图 4-2 ”坐标 系 


canvas 元 素 的 用 途 只 是 作为 2D 泻 染 上 下 文 的 包装 器 ， 它 包含 绘图 和 图 形 操作 所 需要 的 
全 部 方法 和 丰富 功能 。 理 解 这 一 点 是 很 重要 的 ， 强 调 一 下 : 绘图 是 在 2D 泻 染 上 下 文中 进行 
的 , 而 不 是 在 canvas 元 素 中 进行 的 。 可 以 通过 canvas 元 素 访 问 和 显示 2D 泻 染 上 下 文 。canvas 
对 象 的 getContext 方法 可 以 获得 2D 演 染 上 下 文 ， 代 码 如 下 所 示 : 


Var context = canvas .getContext ('2d'); 


4.1.4 绘制 带 边框 的 矩形 


我 们 取得 了 canvas 上 下 文 的 对 象 后 ， 就 可 以 开始 绘制 图 形 了 。 只 要 添加 下 面 的 这 行 代码 
就 可 以 了 : 


context .fillRect (0,0,80,100); 
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部 ; 


完整 的 代码 如 下 所 示 : 


<!DOCTYPE HTML> 

<html> 

<body> 

<canvas id="myCanvas">your browser does not support the canvas tag </canvas> 
<script type="text/javascript"> 

var canvas=document .getElementById('myCanvas'); 
Var contexts.getContext('2d'); 

context .fillRect (0,0,80,100); 

</script> 

</body> 

</html> 


用 canvas 元 素 绘制 图 形 有 两 种 方式 : 填充 (GDD 和 绘制 边框 (stroke)。 填 充 是 指 填 满 图 形 内 
绘制 边框 是 指 不 填 满 图 形 内 部 ， 只 绘制 图 形 的 外 框 。 这 两 个 方法 具有 同样 的 参数 ，x 是 


指 托 形 起 点 的 横 坐 标 ，y 是 指 矩 形 起 点 的 纵 坐 标 ，width 是 指 和 矩形 的 宽度 ，height 是 指 矩 形 的 
高 度 。canvas 元 素 结合 使 用 这 两 种 方式 来 绘制 图 形 。 在 进行 图 形 绘制 的 时 候 ， 首 先 要 设 定好 
绘图 的 样式 ， 然 后 调用 有 关 的 方法 进行 图 形 的 绘制 。 默 认 填充 黑色 是 不 是 太 单调 了 ， 我 们 可 
以 使 用 fillStyle 属性 设置 填充 的 颜色 ， 使 用 strokeStyle 设置 线条 的 颜色 。 





代码 如 下 所 示 : 

context .fillSstyle = "rgb(255,0,0)"; 
context .fillSstyle = "red"; 

context .fillStyle = "#FF0000"; 


上 面 三 条 语句 的 效果 相同 ， 都 是 设置 填充 颜色 为 红色 。 样 式 中 的 颜色 值 可 以 是 “red” 或 


“blue” 这 种 颜色 名 , 也 可 以 是 “#EEEEFFF” 这 种 十 六 进 制 的 颜色 值 。 另外, 也 可 以 通过 rgb( 红 
色 值 ， 绿 色 值 ， 蓝 色 值 ) 或 rgba( 红 色 值 ， 绿 色 值 ， 蓝 色 值 ， 透 明度 ) 函 数 来 指定 颜色 的 值 。 


在 绘制 图 形 的 时 候 还 可 以 设置 图 形 边框 的 宽度 ， 任 何 直线 都 可 以 通过 lineWidth 属性 来 


指定 直线 的 宽度 ， 代 码 如 下 : 


Context .1ineWidth = "3"; 


添加 样式 后 的 代码 如 下 : 


<!DOCTYPE HTML> 

<html> 

<body> 

<canvas id="myCanvas">your browser does not support the canvas tag </canvas> 
<script type="text/javascript"> 

Var canvas=document .getElementBylId('myCanvas'); 
Var context=canvas.getContext('2d"'); 

context .fillStyle = "rgb(255,0,0)"; 

context .strokeSstyle = "#00FF00"; 

context .lineWidth = "3"; 

context .fillRect (0,0,80,100); 

context .strokeRect (0,0,80,100); 
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</script> 
</body> 
</html> 


4.2 绘制 基本 图 形 


4.2.1 绘制 线条 
线条 与 绘制 图 形 有 一 些 区 别 。 它 们 实际 上 称 为 路 径 。 下 面 的 代码 将 绘制 一 条 直线 。 


Context .beginPath(); // Start the path 

context .moveTo(40, 40); // Set the path origin 
context.lineTo(340, 40);// Set the path destination 
context .closePath(); // Close the path 
context.stroke(); // Outline the path 


这 段 代码 执行 了 如 下 步骤 

(1) 准备 开始 创建 路 径 。 

(2) 设置 路 径 的 原点 坐标 。 

(3) 设置 路 径 的 终点 坐标 。 

(4) 完成 路 径 的 绘制 。 

图 像 上 下 文 对 象 的 beginPath 方法 表示 开始 路 径 的 创建 ，moveTo(x,y) 表 示 将 当前 位 置 移 
动 到 新 的 参数 坐标 , lineTo(x,y) 表 示 将 当前 位 置 移动 到 新 的 参数 目标 并 且 在 两 个 坐标 之 间 夯 一 
条 直线 。 如 果 画 布 的 子路 径 是 打开 的 ， closePath0 通 过 添加 一 条 线条 连接 当前 点 和 子路 径 起 始 
点 来 关闭 它 。 

如 果子 路 径 已 经 闭合 了 ， 这 个 方法 不 做 任何 事情 。 一 旦 子路 径 闭 合 ， 就 不 能 再 为 其 添加 
更 多 的 直线 或 曲线 了 。 要 继续 向 该 路 径 添加 ， 需 要 通过 调用 moveTo0 开 始 一 条 新 的 子路 径 。 


4.2.2 ”绘制 圆 形 





圆 形 的 绘制 要 复杂 许多 ，canvas 上 下 文 把 绘制 圆 形 和 绘制 圆 弧 视 作 相同 的 功能 ， 因 为 圆 
弧 实 际 上 是 圆 形 的 组 成 部 分 -首尾 相连 的 圆 弧 就 是 圆 形 。 在 canvas 中 创建 一 个 圆 形 的 代码 
如 下 : 

<!DOCTYPE HTML> 


<html> 
<body> 











<canvas id="myCanvas">your browser does not support the canvas tag </canvas> 
<script type="text/javascript"> 

Var canvas=document .getElementBylId('myCanvas'); 

Var context=canvas.getContext('2d'); 

context .beginPath(); // Start the path 

context.arc(100, 100, 50, 0, Math.PI*2, false); // Draw a circle 
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context .closePath(); // Close the path 
context .fill(); // Fill the path 
</script> 

</body> 

</html> 








rc0 方 法 用 来 绘制 圆 弧 ， 它 的 语法 是 : 


arc(x, y, radius, startAngle, endAngle, counterclockwise) 











参数 的 说 明 如 表 4-1 所 示 。 


表 4-1 arc 方 法 的 参数 说 明 








参数 说 明 
we 描述 圆 弧 的 圆 形 的 圆心 的 坐标 
radius 描述 圆 弧 的 圆 形 的 半径 
startAngle、endAngle 沿 着 圆 指定 圆 弧 的 开始 点 和 结束 点 的 一 个 角度 。 这 个 角度 用 弧度 来 衡量 
counterclockwise 圆 弧 沿 着 圆周 的 逆 时 针 方向 TRUE) 还 是 顺 时 针 方 向 EALSE) 人 遍历 


如 果 我 们 习惯 使 用 角度 ， 请 使 用 下 面 的 方法 将 弧度 转换 为 角度 : 
var radians = degrees*Math.PI/180 


其 中 Math.PI 表示 角度 为 180 度 。 


4.3 绘制 文本 


4.3.1 文本 设置 


在 游戏 界面 中 ， 不 仅 有 图 像 ， 还 会 有 文本 ，canvas 如 何 处 理 文本 呢 ? canvas 绘制 文本 其 
实 很 简单 ， 代 码 如 下 : 


<!DOCTYPE HTML> 

<html> 

<body> 

<canvas id="myCanvas">your browser does not support the canvas tag </canvas> 
<script type="text/javascript"> 

Var canvas=document .getElementBylId('myCanvas'); 

Var context=canvas.getContext('2d'); 

context .fillSstyle="#00FF00"'; 


context.font = '40px Arial'; 
context .fillText ('Hello World',0,50); 
context.font = "italic 30px serif"; 


context .strokeText ('Hello World',0,100); 
</script> 
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</body> 
</html> 


有 关 文 本 的 属性 和 方法 有 filText 和 strokeText 方法 : 

fillText (string text, int x, int yl[, int maxWidth]) 

从 指定 坐标 点 位 置 开始 绘制 填充 的 文本 文字 。 参 数 maxWidth 是 可 选 的 ， 如 果 文 本 内 容 
宽度 超过 该 参数 设置 ， 则 会 自动 按 比 例 缩 小 字体 以 适应 宽度 。 与 本 方法 对 应 的 样式 设置 属性 
为 fillStyle。 

strokeText 方法 的 语法 为 : 





strokeText (string text, int x, int y[, int maxWidth]) 


从 指定 坐标 点 位 置 开 始 绘制 非 填充 的 文本 文字 (文字 内 部 是 空心 的 )。 参 数 maxWidth 是 可 
选 的 ， 如 果 文 本 内 容 宽度 超过 该 参数 设置 ， 则 会 自动 按 比例 缩小 字体 以 适应 宽度 。 该 方法 与 
flText0 用 法 一 致 ， 不 过 strokeText0 绘 制 的 文字 内 部 是 非 填充 (空心 的 ，flText0 绘 制 的 文字 
是 内 部 填充 (实心 ) 的 。 与 本 方法 对 应 的 样式 设置 属性 为 strokeStyle。 


4.3.2 文本 的 对 齐 方 式 


canvas 中 提供 了 文本 对 齐 的 属性 。textAlign 属性 是 水 平方 向 的 文字 对 齐 , 它 的 值 包括 center、 
end、left、right、start。textBaseline 是 竖 直 方向 的 文字 对 齐 ， 它 的 值 包括 alphabetic、bottom、 
hanging、ideographic、middle、top。 

在 水 平方 向 上 ， 为 了 看 出 各 种 对 齐 方式 的 不 同 ， 我 们 在 文本 坐标 位 置 画 一 条 竖 线 ， 代 码 
如 下 所 示 : 


<!DOCTYPE html> 

<html> 

<body> 

<canvas id="myCanvas" width="300" height="200" style="border:1px solid #d3d3d3;"> 
Your browser does not support the HTML5 canvas tag. 
</canvas> 

<script> 

var c=document .getElementById("myCanvas"); 
var context=c.getContext ("2d"); 
context.strokeStyle="blue"; 

context .moveTo (150,20); 
context.lineTo(150,170); 

context .stroke(); 

context .font="15px Arial™"; 

// 显示 不 同 的 textAlign 值 

context .textAlign="start"; 

context .fillText ("textAlign=start",150, 60); 
context .textAlign="end"; 

context .fillText ("textAlign=end",150, 80); 
context .textAlign="left"; 

context .fillText ("textAlign=left",150,100); 
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Context .textAlign="center™; 

context .fillText ("textAlign=center",150,120); 
context .textAlign="right"; 

context .fillText ("textAlign=right",150,140); 


</script> 

</body> 

</html> 

运行 效果 如 图 4-3 所 示 。 


xtAlign=start 
textAjign=en 
xtAlign=let 


textAlign)=c enter 
textAlign=rig| 





图 4-3 textAlign 的 运行 效果 


下 面 我 们 来 绘制 弹力 球 游戏 界面 ， 首 先 要 根据 长 度 和 宽度 绘制 一 个 画布 边界 ， 并 封装 为 
-个 函数 ， 代 码 如 下 所 示 : 
// 绘 制 画 布 边界 


function drawRect() { 
context .beginPath (); 
context .strokeRect (0, 0,width, height); 
context .closePath (); 
context .fil] (); 





要 绘制 许多 方块 和 一 个 小 球 ， 代 码 如 下 所 示 : 


function drawBars() { 
for (var i=0;i<bars.length;i++) { 
drawBar (bars[i] .x,bars[i].y,bars[i] .color); 


} 

// 绘 制 方块 

function drawBar (x,y,color) { 
context .fillstyle = color; 
context .beginPath (); 
context .fillRect (x,y,barSizeWidth,barSizeHeight); 
context .closePath (); 
context .fil1]l (); 

} 

/ /绘制 小 球 位 置 

function drawBall (x,y,r) { 
context .fillstyle = "#000000"; 


“20* 


Web 前 端 开发 技术 一 一 HTML5+Ajax+jQuery 


context .beginPath (); 
context .arc (x,y,r,0,2*Math.PI,true); 


context .closePath (); 
context .fil]l (); 


} 


由 于 画布 


不 断 重 绘 ， 重 绘 之 前 需要 控 除 画布 ， 这 里 使 用 了 clearRect 方法 。clearRect 方法 





区 域 的 图 形 ， 代 码 如 下 : 


/7 清空 画布 
function clear() { 
context.clearRect (0,0,width,height); 


} 


在 绘制 图 形 之 前 ， 也 就 是 页 面 加 载 完成 后 需要 做 初始 化 工作 ， 初 始 方块 对 象 和 小 球 对 象 


等 。 代 码 如 下 


window.addEventListener ("load", init,true); 
// 当 整个 页 面 加 载 完毕 后 此 函数 被 首先 调用 


function init() { 


} 


context = document .getElementById ("canvas") .getContext ("2d"); 


drawRect (); 


// 添 加 颜色 到 全 局 数组 ， 以 便 能 够 着 色 方块 
Colors.push ("#000000"); 

colors.push ("#BR1E45") ; 

Colors.push ("#DE2FC4"); 

colors.push ("#6A1FED"); 

colors.push ("#0ABF2E"); 

colors.push ("#ABB31B"); 
colors.push("#C95B12"); 

// 初 始 化 方块 

initBars () 7 

// 初 始 化 小 球 

initBall (); 

// 循 环 运行 下 面 的 函数 

//setTimeout (gameProcess,1000/frameSpeed) 
timerFunction(); 

scoreDiv = document .getElementById("score"); 
// 绑 定 键盘 事件 

window.onkeydown = keydown; 
window.onkeyup = keyup; 


// 游 戏 开始 时 初始 化 小 球 


function initBall() { 


// 将 小 球 置 于 画布 中 间 的 方块 上 

var mid indx = Math.floor (bars.length/2); 
ball.x = bars[mid indx] .xtbarSizeWidth/2; 
ball.y = bars[mid indx] .y-ball.radius; 
collidedBar = bars [mid indx]; 
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// 游 戏 开始 时 初始 化 方块 
function initBars() { 
// 从 上 往 下 添加 方块 
var y bar = height-barSizeHeight; 
// 计 算 需 要 的 方块 个 数 
Var noOfBars = y bar/step; 
fEor (var v=0;v<noOfBars;v++) { 
// 随 机 设置 方块 的 x 坐标 
var j = (width-barSizeWidth)*Math.random(); 
// 随 机 指定 颜色 
bars.push ({"x":Math.floor(j),"y":y bar,"color":colors [Math. 
floor (6*Math.random())]}); 
y_bar-=step; 


/ 光 汪 火炎 炎炎 火炎 炎炎 炎炎 交火 风 风 交 交 风灾 六 克 燃 类 炊 丸 交 思 Ven 七 FunctiOnS** 火 火 火光 交火 炎 火灾 火炎 炎炎 炎炎 炎炎 交火 灾 交 火灾 灾 炎 炎 风 了/ 
function keyup(e) { 
if(e.keyCode==37 || e.keyCode==39) { 
ball.dx = 0; 


} 
function keydown(e) { 
// 按 下 空格 键 
if(e.keyCode==32) { 
if(stop) { 
// 检 测 小 球 是 否 在 方块 上 
if(ball.x>collidedBar.x-ball.radiusg&&ball .x<collidedBar. 
xtbarSizeWidth+ball .radius) 


// 设 置 向 上 的 速度 
ball.dy = -jumpVel; 
// 设 置 重 力 加 速度 
ball.acc = gravity; 
stop = false; 


} 
} 
// 左 箭头 键 
else if(e.keyCode==37) { 
if(ball.x-ball.radius!=0) ball.dx = -horizontalVel; 
} 
// 右 箭头 键 
else if(e.keyCode==39) { 
if(ball.xtball.radius-width!=0) ball.dx = horizontalVel; 


I. 


// 键 盘 上 的 'P' 键 
else if(e.keyCode==80) { 
gamePause = !gamePause; 


timerFunction(); 
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} 
function timerFunction() { 
setTimeout (gameProcess, 1000/frameSpeed); 


} 


由 于 setTimeout(gameProcess,1000/frameSpeed) 在 多 个 地 方 使 用 到 ， 上 面 的 代码 中 对 它 进 
行 了 封装 , 封装 为 tmerFunction 函数 。 上面 的 代码 首先 得 到 canvas 上 下 文 , 然后 调用 initBars 
初始 化 方块 对 象 ， 调 用 initBall 初始 化 小 球 对 象 ， 然 后 调用 timerFunction 函数 ， 最 后 进行 事 
件 绑 定 ， 当 按 下 空格 键 时 执行 下 面 的 代码 : 

ifE(stop) { 

// 检 测 小 球 是 否 在 方块 上 

if(ball.x>collidedBar.x-ball.radiusg&&ball.x<collidedBar.xtbarSizeWidth+ 


ball .radius) 
{ 








// 设 置 向 上 的 速度 
ball.dy = -jumpVel; 
// 设 置 重力 加 速度 
ball.acc = gravity; 
stop = false; 


} 


首先 通过 全 局 变量 stop 判断 小 球 是 否 处 于 静止 状态 , 因为 只 有 静止 状态 的 小 球 才 能 响应 
空格 键 ， 又 进一步 验证 小 球 与 当前 碰撞 方块 的 位 置 正确 后 ， 设 置 小 球 的 向 上 速度 和 重力 加 速 
度 ， 并 设置 小 球 静 止 状态 为 false。 
下 面 我 们 来 完成 游戏 主 循环 函数 ， 代 码 如 下 : 
// 游 戏 的 主 循环 函数 
function gameProcess() { 

/ /首先 清空 canvas 

clear(); 

// 重 画 边界 

drawRect () 

// 移 动 方块 

moveBars () 

// 移 动 小 球 

ball = moveBall (ball); 

// 检 查 ball 和 bar 是 否 碰撞 

Var res = checkBarCollision(); 

// 如 果 发 生 碰撞 

if(res.bool) { 
// 小 球 跟随 方块 移动 
ball.dy = normalSpeed; 
ball.acc = 0; 
// 记 录 碰 撞 的 方块 ， 置 小 球 停止 状态 为 true 
collidedBar = res.bar; 


stop = true; 
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// 重 绘 小 球 
drawBall (bal1.x,bal1.y,bal1.radius): 
// 重 绘 所 有 方块 
drawBars () 7 
// 检 测 画 布 底部 的 碰撞 
if(checkFloorCollision()) { 

ball.dy 0; 

ball.dx = 0; 

ball.acc = 0; 

stop = true; 


} 
// 根 据 得 到 的 分 数 设 置 难度 
makeDifficult (); 
// 如 果 游 戏 没有 暂停， 也 没有 结束 。 继 续 运行 程序 
if(!gamePauseg&&!isGameOver) 
timerFunction(); 
} 
// 根 据 得 到 的 分 数 设 置 难度 
function makeDifficult() { 
if(score>500ggscore<1000) { 
frameSpeed = 30; 


else if(score>1000&&score<1500) { 
frameSpeed = 35; 


else if(score>1500&&score<2000) { 
frameSpeed = 40; 


else if(score>2000&&score<3000) { 
frameSpeed = 45; 


else if(score>3000&&score<4000) { 
frameSpeed = 50; 





else if(score>4000&&score<5000) { 
frameSpeed = 60; 
} 
} 
// 游 戏 结束 
function gameOver() { 
isGameOver = true; 
document .getElementById ("status") .innerHTML=" 游 戏 结束 , 按 F5 重新 开始 ."; 
} 
function checkFloorCollision() { 
// 检 测 小 球 与 方块 之 间 的 碰撞 
if(height- (ball.ytball.radius)<01) { 
ball.dy = 0;ball.dx=0;ball .acc=0; 
gameOver (); 
} 
var right wall = ball.xtball.radius-width; 
var left wall = ball.x-ball.radius; 
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Var boll = right wall<3g¢gright wall>-3; 

Var bol2 = left wall<3gg&left wall>-3; 

if(bollllbol2) { 
ball.dx = 0; 

} 

if(ball.x>collidedBar.x||ball.x<collidedBar.x+tbarSizeWidth) { 
ball.acc = gravity; 

} 

return false; 


} 


上 面 的 代码 首先 清空 画布 并 重 绘 边框 ， 然 后 调用 moveBars 移动 方块 ， 调 用 moveBall 移 
动 小 球 ， 在 移动 方块 的 时 候 还 需要 改变 玩家 得 分 ， 当 一 个 方块 移出 画布 的 底部 ， 就 增加 20 
分 。 代 码 如 下 : 


// 移 动 小 球 
function moveBall (inpBall) { 
inpBall.x += Math.floor (inpBall .dx); 
// 增 加 下 沙 速 度 
inpBall.dy += inpBall.acc; 
inpBall.y += Math.floor (inpBall.dy); 
return inpBall; 
} 
// 移 动 方块 
function moveBars() { 
// 检 测 方 块 是 否 从 canvas 移出 
if(bars.length>0&&gbars[0] .ytnormalSpeed==height) { 
// 移 除 最 底 端的 方块 
bars.shift(); 
// 对 每 个 移 除 的 方块 增加 20 分 
score+=20; 
scoreDiv.innerHTML = "Score : "+score; 


// 增 加 一 个 新 的 方块 
var j = (width-barSizeWidth)*Math.random(); 
bars.push({"x":j,"y":-barSizeHeight, "color":colors [Math.floor 
(6*Math.random())]}); 
} 
// 增 加 方块 的 y 坐标 
for (var i=0;i<bars.length;i++) { 
bars[i].y += normalSpeed; 


} 


上 面 的 代码 通过 checkBarCollision 检测 小 球 是 否 与 方块 相 撞 ，checkBarCollision 返回 的 
是 一 个 对 象 ， 包 括 的 属性 bool 表示 是 否 相 撞 ， 属 性 bar 表示 相 撞 的 方块 对 象 。 代 码 如 下 : 


function checkBarCollision() { 





Var response = {"bar":null,"bool":false}; 
var temp y = ball.ytball.radius; 
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for (var i = 0; i<bars.length;i++) { 


} 


Var mod = Math.floor (bars[i] -y-temp y); 
Var b = mod>-5 && mod<5; 
var bl = mod>-barSizeHeight && mod<barSizeHeight; 
// 小 球 向 下 运动 
if(bl&gg (ball.x>=bars[i] .x && ball.x<=bars[i] .x+barSizeWidth) && 
ball.dy>0) 
{ 
ball.y = bars[il].y-ball.radius; 


response.bool = true; 
response.bar = bars[il]; 
} 
// 小 球 向 上 运动 


if (bgg& (ball .x>=bars[i] .x && ball.x<=bars[i] .x+barSizeWidth) && 
ball .dy<=0) 
{ 

ball.y = bars[i].y-ball.radius; 

response.bool = true; 

response.bar = bars[i]; 


} 


return response; 


} 


下 面 绘制 下 一 帧 界面 ， 分 别 调用 drawBall 和 drawBars 绘制 小 球 和 方块 。 最 后 调用 
makeDifficult 设置 游戏 的 难度 。 

至 此 ， 弹 力 球 游戏 就 制作 完成 了 ， 并 将 游戏 的 所 有 代码 保存 为 game.html， 在 人 人 微 博 
网 站 中 就 可 以 通过 game.html 访问 弹力 球 游戏 了 。 


4.4.1 绘制 图 像 


4.4 使 用 图 像 


canvas 还 能 够 加 载 图 像 到 画布 中 , 这 与 绘制 图 形 一 样 简单 。 加 载 图像 时 , 需要 使 用 drawImage 
方法 ， 该 方法 的 语法 如 下 所 示 。 


context .drawImage (img, x, y); 








方法 只 使 用 了 三 个 参数 ， 第 一 个 参数 可 以 是 img 元 素 、video 元 素 或 者 JavaScript 中 的 











image 对 象 , 使 上 








该 参数 代表 的 实际 对 象 来 装载 图 像 文 件 。x 与 y 为 绘制 时 该 图 像 在 画布 中 的 
起 始 坐标 。 例 如 : 


<!DOCTYPE HTML> 


<html> 
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<head> 
<meta charset="utf-8"> 
<script type="text/javascript"> 
window.onload = function () 
{ 
Var c=document .getElementById ("myCanvas"); 
Var ctx=c.getContext ("2d"); 
Var image = new Image(); 
image.src = "tul.jpg"; 
image.onload = function () 
{ 
ctx.drawImage (image, 10,10); 
} 
} 
</script> 
</head> 
<body> 
<p> 夯 布 : </p> 
<canvas id="myCanvas" width="500" height="300" style="border:lpx solid 
#d3d3d3;background:#ffffff;"> 
Your browser does not support the HTML5 canvas tag. 
</canvas> 
</body> 
</html> 


我 们 把 drawImage 函数 放 在 onload 函数 里 面 , 如 果 图 像 文 件 是 一 个 来 源 于 网 络 上 的 比较 
大 的 图 像 文件 ， 必 须要 等 待 图 像 全 部 装载 完毕 才能 绘制 该 图 像 ， 如 果 直 接 调 用 drawImage 函 
数 则 不 能 正确 显示 该 图 像 。 


4.4.2 ”放大 缩小 图 像 
有 时 希望 调整 图 像 的 大 小 ， 需 要 指定 绘制 图 形 的 宽度 和 高 度 ， 方 法 如 下 所 示 : 
context .drawImage (image, x, y, width, height); 


让 我 们 将 前 一 个 例子 的 图 像 缩小 一 半 来 显示 ， 相 应 的 drawImage 方法 修改 为 以 下 形式 : 


ctx.drawImage (image, 0, 0, image.width/2, image.height/2); 


缩小 后 的 效果 跟 原 来 的 效果 如 图 4-4 所 示 。 








图 4-4 缩小 图 像 
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4.4.3 平 铺 图 像 


游戏 制作 中 背景 通常 需要 平 铺 ， 平 铺 技术 就 是 按 一 定 比例 将 画布 铺 满 。 可 以 通过 canvas 
上 下 文 的 createPattem 方法 实现 ， 语 法 如 下 : 


Context .createPattern (image, type) 


该 方法 使 用 两 个 参数 : image 参数 为 要 平 铺 的 图 像 ，type 参数 为 平 铺 类 型 ， 它 的 值 必须 
是 下 面 的 字符 串 之 一 : no-repeat( 不 平 铺 )、repeat-x( 横 方向 平 铺 )、repeat-y( 纵 方向 平 铺 )、repeat( 全 
方向 平 铺 )。 例 如 : 


<!DOCTYPE HTML> 
<html> 
<head> 
<title> 平 铺 模式 </title> 
<meta charset="utf-8"> 
</head> 
<body> 
<canvas id="canvas" width="620" height="620" style="background-color: 
rgb(222, 222; 222)"> 
Your browser does not support the HTML5 canvas tag. 
</canvas> 
<br /> 
<button type="button" onclick="drawIt();">Demo</button> 
<button type="button" onclick="clearIt();"> 清 除 画 布 </button> 
<script type="text/javascript"> 
Var ctx = document .getElementById('canvas') .getContext ('2d'); 
function drawIt() { 
clearIt (); 
var img = new Image(); 
img.onload = function () { 
var pattern = ctx.createPattern (img, "no-repeat"); 
ctx.fillstyle = pattern; 
ctx.strokestyle = "blue"; 
ctx.beginPath (); 
ctx.rect (0, 0, 300, 300); 
Gt EL 
ctx.stroke () > 





pattern = ctX.-createPattern (img, "repeat-Xx") 7 
ctx.fillstyle = pattern; 

ctx.strokeSstyle = "blue"; 

ctx.beginPath (); 

ctx.rect (300, 0, 300, 300); 

Ctr fil 

ctx.stroke (); 


pattern = ctx.createPattern (img, "repeat-y"); 
ctx.fillstyle = pattern; 
ctx.strokeStyle = "blue"; 
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ctx.beginPath (); 
ctx.rect (0, 300, 300, 300); 
ctx £111()? 

ctx.stroke(); 


pattern = ctx.createPattern (img, "repeat"); 
ctx.fillStyle = pattern; 
ctx.strokeStyle = "blue"; 
ctx.beginPath (); 
ctx.rect (300, 300, 300, 300); 
Ctx.E1ilL{)? 
ctx.stroke (); 
} 
img.src = "xrk.gif"; 
} 
function clearIt() { 
ctx.clearRect (0, 0, 620, 620); 
} 
</script> 
</body> 
</html> 


运行 效果 如 图 4-5 所 示 。 








Demo | | 清除 画布 





图 4-5 平 铺 图 像 的 运行 效果 
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4.4.4 ”裁剪 图 像 


在 绘制 图 像 时 ， 有 时 希望 保留 部 分 矩形 区 域 ， 这 就 需要 将 矩形 以 外 的 全 部 内 容 删 除 。 裁 
剪 的 目的 是 将 图 像 剪 切 为 较 小 尺寸 ，drawImage 方法 还 可 以 实现 裁剪 功能 。 语 法 如 下 所 示 : 














context .drawImage (image, sx, Sy, sw, sh, dx, dy, dw, dh) 


该 方法 使 用 9 个 参数 : image 仍然 代表 被 复制 的 图 像 文件 ;sx 与 sy 分 别 表示 源 图 像 的 被 
复制 区 域 在 画布 中 的 起 始 横 坐标 与 起 始 纵 坐标 ; sw 与 sh 分 别 表示 裁剪 源 图 像 的 宽度 和 高 度 ; 
dx 与 dy 分 别 表示 绘制 目标 图 像 的 起 点 坐标 ; dw 与 dh 表示 复制 后 的 目标 图 像 的 宽度 和 高 度 。 
该 方法 可 以 只 复制 图 像 的 局 部 ， 只 要 将 sx 与 sy 设置 为 局 部 区 域 的 起 始点 坐标 ， 将 sw 与 sh 
设置 为 局 部 区 域 的 宽度 和 高 度 就 可 以 了 ， 如 图 4-6 所 示 。 


Source Image 


Destination Canvas 





图 4-6 裁 前 图 像 








canvas 的 clip 方法 也 可 以 实现 图 像 的 剪裁 , 需要 结合 画布 路 径 一 起 使 用 。 首先 创建 路 径 ， 
然后 调用 clip 方法 设置 剪裁 区 域 ， 绘 制图 像 时 则 只 绘制 路 径 所 包括 区 域内 的 图 像 。 例 如 ， 

<!DOCTYPE HTML> 

<html> 


<head> 
<meta charset="utf-8"> 








<script type="text/javascript"> 
window.onload = function () 
{ 
Var c=document .getElementById ("myCanvas"); 
Var ctx=c.getContext ("2d"); 
Var image = new Image(); 
image.src = "tul.jpg"; 
image.onload = function () 
{ 
ctx.beginPath(); 
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ctx.arc(150,150,75,0,Math.PI*2,true); 
ctx.closePath (); 
ots elitjs 
ctx.drawImage (image, 0, 0, image.width, image.height); 
} 
} 
</script> 
</head> 
<body> 
<p> 男 布 : </p> 
<canvas id="myCanvas" width="700" height="300" style="border:lpx solid 
#d3d3d3;background:#ffffff;"> 
Your browser does not support the HTML5 canvas tag. 
</canvas> 
</body> 
</html> 


代码 运行 效果 如 图 4-7 所 示 。 





图 4-7 clip 方法 的 运行 效果 


像素 的 处 理 


canvas 提供 了 三 个 方法 用 于 像素 级 操作 : createImageData getImageData 和 putImageData。 
createImageData 方法 的 语法 为 : 


var imgData=context .createImageData (width, height); 


或 者 


var imgData=context .createImageData (imageData); 


前 者 以 指定 的 尺寸 (以 像素 计 ) 创 建新 的 ImageData 对 象 , 后 者 则 创建 与 男 一 个 ImageData 
对 象 尺寸 相同 的 新 ImageData 对 象 (不 会 复制 图 像 数据 )。 
createImageData 返回 的 ImageData 对 象 保 存 了 图 像 像素 值 , 它 有 三 个 属性 : width 、height 


和 data。data 





属性 的 类 型 为 Uint8ClampedAray， 用 于 储存 width*height*4 个 像素 值 。 每 一 个 


像素 有 RGB 值 和 透明 度 alpha 值 。 为 了 更 好 地 理解 其 原理 ， 让 我 们 来 看 一 个 例子 一 一 绘制 绿 


色 箱 形 。 
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<!DOCTYPE HTML> 
<html> 

<head> 

<meta charset="utf-8"> 


<script type="text/javascript"> 


window.onload = function () 


c=document .getElementById ("myCanvas"); 
ctx=c.getContext ("2d"); 

imgd = ctx.createImageData(50, 50); 
pix = imgd.data; 


(var i = 0; n = pix.length, i < n; i += 4) 


pix[i] = 255; 


pix[i+1]=0; 


pix[i+2]=0; 
pix[i+3] = 127; 


} 


ctx. 


} 


putImageData (imgd, 0,0); 


</script> 
</head> 
<body> 

<p> 画 布 : </p> 
<canvas id="myCanvas" width="300" height="300" style="border:lpx solid 


#d3d3d3;background:#ffffff;"> 


Your browser does not support the HTML5 canvas tag. 


</canvas> 
</body> 
</html> 


ImageData 的 内 容 类 似 于 [rl,g1,b1,al,r2,g2,b2,a2.r3,b3.g3,a3,.…]， 其 中 ，rl,g1,bl,al 为 第 一 
个 像素 的 红色 值 、 绿 色 值 、 蓝 色 值 、 透 明 值 ，r2,g2,b2,a2 为 第 二 个 像素 的 红色 值 、 绿 色 值 、 


蓝 色 值 、 


在 画布 中 访问 像素 的 方法 是 getImageData。 语 法 如 下 所 示 : 


透明 值 ， 以 此 类 推 。 


context .getImageData(x, y, width, height); 


这 个 方法 有 4 个 参数 : 要 访问 的 像素 区 域 的 原点 坐标 (x，y)、 像 素 区 域 的 宽度 和 高 度 ， 


返回 一 个 


ImageData 对 象 。 


putImageData0 方法 将 图 像 数据 (从 指定 的 ImageData 对 象 ) 放 回 画 布 上 。 语 法 如 下 所 示 : 


context .putImageData (imgData, x,y[,dirtyX,dirtyY,dirtyWidth,dirtyHeight]) 


这 个 方法 有 7 个 参数 : imgData 为 像素 数组 ，x、y 分 别 表示 绘制 图 形 的 起 点 横 坐 标 和 纵 
坐标 ;dirtyX、dirtyY、dirtyWidth、dirtyHeight 为 可 选 参数 ， 表 示 一 个 矩形 ， 如 果 提 供 这 4 个 


参数 ， 则 


只 会 绘制 这 个 矩形 范围 内 的 图 像 。 例 如 : 
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<!DOCTYPE HTML> 

<html> 

<head> 

<meta charset="utf-8"> 

<script> 

window.onload = function () 

{ 
Var c=document .getElementById ("myCanvas"); 
Var ctx=c.getContext ("2d"); 
ctx.fillStyle="green"; 
ctx.fillRect (10,10,140,140); 


function copy() 


Var c=document .getElementById ("myCanvas"); 
Var ctx=c.getContext ("2d"); 

var imgData=ctx.getImageData(10,10,140,140); 
ctx.putImageData (imgData, 10,160, 0,0,70,70); 


</script> 

</head> 

<body> 

<p> 画 布 : </p> 

<canvas id="myCanvas" width="300" height="300" style="border:lpx solid 
#d3d3d3;background:#ffffff;"> 
Your browser does not support the HTML5 canvas tag. 

</canvas> 

<button onc1lick="copy() "> 复制 </button> 

</body> 

</html> 


代码 运行 效果 如 图 4-8 所 示 。 





图 4-8 ”putImageData0 方 法 的 运行 效果 
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本 章 小 结 








本 章 介绍 了 弹力 球 游戏 的 设计 过 程 ， 并 详细 介绍 了 游戏 制作 中 通用 的 代码 结构 。 学 习 了 
canvas 如 何 绘制 线条 、 和 矩形 、 辆 形 和 文本 。 本 章 canvas 的 内 容 比 较 基础 ， 希 望 这 些 内 容 能 够 
拓宽 我 们 的 眼界 ， 帮 助 我 们 进一步 学 习 画 布 的 高 级 功能 。 


本 章 练习 











1. canvas 的 用 途 是 什么 ? 
2. 用 canvas 绘制 三 条 不 同 的 竖 线 。 
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2009 年 ，NoSQL 概念 被 提 了 出 来 ， 那 时 的 NoSQL 主要 是 指 非 关系 型 、 分 布 式 、 不 提供 
数据 库 的 设计 模式 。MongoDB 是 目前 非常 流行 的 非 关系 数据 库 ， 本 章 我 们 将 进入 MongoDB 的 
世界 。 


本 章 内 容 : 

e@ ”如 何 下 载 及 安装 MongoDB 

e@ 掌握 MongoDB 的 文档 和 集合 概念 
@ ， 如何 使 用 MongoDB 索引 


5.1 MongoDB 初 探 


MongoDB 是 一 个 开源 的 、 面 向 文档 存储 的 数据 库 ， 是 NoSQL 数据 库 的 一 种 。NoSQL 
最 常见 的 解释 是 Non-Relational( 非 关系 型 )，Not Only SQL( 不 仅 是 SQL) 也 被 很 多 人 接受 。 

NoSQL 用 得 最 多 的 当 数 key-value 存储 ， 当 然 还 有 其 他 的 文档 型 的 列 存储 、 图 形 数据 库 、 
XML 数据 库 等 。 在 NoSQL 概念 提出 之 前 ， 这 些 数据 库 就 被 用 于 各 种 系统 当中 ， 但 是 却 很 少 
用 于 Web 互联 网 应 用 。 随 着 Web 2.0 的 快速 发 展 ， 非 关系 型 、 分 布 式 数据 存储 得 到 了 快速 发 
展 ， 它 们 不 保证 关系 型 数据 库 的 ACID( 原 子 性 、 一 致 性 、 隔 离 性 、 持 久 性 ) 特 性 。MongoDB 
的 名 称 取 自 humongous( 巨 大 的 ) 的 中 间 部 分 ， 足 见 MongoDB 的 宗旨 。 在 处 理 大 量 数据 上 面 ， 
MongoDB 是 可 扩展 、 高 性 能 的 下 一 代数 据 库 ， 由 C+ 语言 编写 ， 旨 在 为 Web 应 用 提供 可 扩 
展 的 高 性 能 数据 存储 解决 方案 。 它 的 特点 是 高 性 能 、 易 部 署 、 易 使 用 ， 存 储 数据 非常 方便 ， 

e 模式 自由 ， 支 持 动态 查询 、 索 引 ， 可 轻易 查询 文档 中 内 媒 的 对 象 及 数组 。 

e 面向 文档 存储 ， 易 存储 对 象 类 型 的 数据 ， 包 括 文档 内 嵌 对 象 及 数组 。 

e 高 效 的 数据 存储 ， 支 持 二 进 制 数据 及 大 型 对 象 (如 照片 和 视频 ) 。 

e 支持 复制 和 故障 恢复 , 提供 了 主 -从 、 主 - 主 模式 的 数据 复制 及 服务 器 之 间 的 数据 复制 。 

e 自动 分 片 以 支持 云 级 别 的 伸缩 性 ， 支 持 水 平 的 数据 库 集群 ， 可 动态 添加 额外 的 服务 器 。 

与 传统 关系 型 数据 库 相 比 , MongoDB 也 有 劣势 , 它 不 适用 于 要 求 高 度 事 务 性 的 系统 、 传 
统 的 商业 智能 系统 、 复 杂 的 跨 文 档 ( 表 ) 级 联 查 询 。 而 对 于 大 数据 量 、 高 并 发 、 弱 事务 的 互联 
网 应 用 ，MongoDB 可 以 应 对 自如 。 

本 章 将 使 用 MongoDB 完成 人 人 微 博 网 站 的 数据 库 设 计 。 数 据 库 的 设计 共 分 为 三 个 部 分 : 

户 表 结构 设计 、 微 博 表 结构 设计 、 粉 丝 关注 表 结 构 设 计 。 
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5.2” MongoDB 的 下 载 与 安装 


MongoDB 的 官方 下 载 地 址 为 http:/www.MongoDB.org/downloads。 我 们 这 里 在 Windows 
64 位 机 器 上 安装 MongoDB， 选 择 的 版 本 为 Windows 64-bit 2008 R2+ 非 SSL 安全 协议 版 本 ， 
下 载 步骤 如 图 5-1 所 示 。 








1 


SelectRelease: 
268 ' 2 


55015 Releae NOES Ch 








Download Source- wz | zip 国 Windows 


VERSION; 


Wndows64bit2008R2+ ， | 3 


INSTALLATION PACKAGE 


BINARY: 





https://fassdl mongodb.org/win32/mongocb-win32-x86_64-2868p1u5-2.6.8.zip 








4 


甸 COPY LINK 





图 5-1 MongoDB 下 载 步骤 





下 载 后 的 文件 名 为 MongoDB-win32-x86_64-2008plus-2.6.8.zip， 将 其 解压 到 G 盘 根 目 录 
下 。 安 装 完毕 后 的 MongoDB 只 有 十 几 个 exe 文件 ， 如 图 5-2 所 示 。 


， 文档 (G) bmongo ， bin 
一 一 至 = 
























共享 ” ”刻录 。 新 建文 件 夫 
名 称 


回 bsondump.exe 






回 mongodexe 
A mongod.pdb 
加 mongodump.exe 


ram Debue， 


mongoexportexe 





mongofiles.exe 


mongoimportexe 


mongorestore.exe 
回 mongos.exe 

A mongospdb 
mongostat.exe 





mongotop.exe 





图 ssleay32.dl 


图 5-2 MongoDB 程序 目录 
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MongoDB 的 数据 目录 不 会 主动 创建 ， 我 们 在 安装 完成 后 需要 创建 它 。 下 面 创建 一 个 新 
目录 : G:MongoDB-win32-x86_64-2008plus-2.6.8\data。 

在 命令 行 中 输入 mongod --dbpath=. \data 运行 MongoDB， 默 认 端 口 是 27017， 如 图 5- 
所 示 。 


国 命令 提示 符 - mongod --dbpath=G\mongo\data 


: nongo \hin Ynongod ——dbpath=G: 
84 or later update is not 


ngoDB starting : pid=5 





图 5-3 启动 MongoDB 


表 5-1 为 MongoDB 的 启动 参数 说 明 。 


表 5-1 MongoDB 启动 参数 











参 数 说 明 
--bind i 绑 定 服务 全 ， 若 绑 定 127.0.0.1， 则 只 能 本 机 访问 
--logpath 旧 定 MongoDB 日 志文 件 ， 注 意 是 指定 文件 ， 不 是 指定 目录 
--logappend 使 用 追加 的 方式 写 日 志 
--dbpath 定数 据 库 路 径 
--port 指定 服务 端口 号 ， 默 认 端 口 是 27017 
~--serviceName 彰 定 服务 名 称 
--serviceDisplayNam 此 定 服务 名 称 ， 有 多 个 MongoDB 服务 时 执行 
--install 背 定 作为 Windows 服务 安装 








MongoDB 数据 库 启动 成 功 后 ， 就 可 以 使 用 mongo.exe 连接 数据 库 ， 如 图 5-4 所 示 。 














“ 画 远 定 命令 提示 答 -mongo 有 - Co eae 


+9898 I CONTROL Hotfix KB2731284 or later update is not 


lconnecting to: te 





图 5-4 连接 MongoDB 


mongo 命令 提供 了 操作 数据 库 的 一 系列 API， 并 且 是 使 用 JavaScript 编写 的 API， 那 么 我 
们 就 可 以 使 用 JavaScript 的 所 有 内 置 对 象 。 而 其 他 操作 命令 可 以 通过 help 命令 学 习 , 如 图 5-5 
所 示 。 
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rate 
DBQuery-shellBatc = x tens to display on s| 


exit 





图 5-5 help 命令 


5.3 ”MongoDB 的 基本 概念 


5.3.1 数据 库 


-个 MongoDB 中 可 以 建立 多 个 数据 库 。MongoDB 中 , show dbs 命令 可 以 显示 所 有 数据 
的 列 , 执行 db 命令 可 以 显示 当前 数据 库 对 象 , 运行 use 命令 可 以 连接 到 指定 的 数据 库 。 例 如: 
db; 


show dbs; 
use mydb; 


运行 效果 如 图 5-6 所 示 。 


ow dbs; 
aanin Cempty) 
local @.878GB 
test @.878GB 





itched to db mydb 


图 5-6 数据 库 操作 


因为 每 个 数据 库 对 应 文件 系统 中 的 文件 ， 所 以 每 个 数据 库 都 有 独立 权限 。 
5.3.2 文档 和 集合 





文档 是 MongoDB 中 数据 的 基本 单元 ， 非 常 类 似 于 关系 数据 库 管理 系统 中 的 行 。 但 两 者 
并 不 完全 对 等 。MongoDB 以 类 JSON 的 格式 来 表示 文档 。 例 如 : 


{'title':'my blog title', ‘content':'my blog content', 'date':new Date()} 





这 种 格式 有 一 个 固定 的 名 字 BSON, BSON(Binary Serialized Document Format) 是 
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种 类 JSON 的 二 进 制 形式 的 存储 格式 ， 简 称 Binary JSON。 它 和 JSON 一 样 , 支持 内 构 的 文档 
对 象 和 数组 对 象 ， 但 是 BSON 有 JSON 没有 的 一 些 数据 类 型 。 








表 5-2 为 BSON 中 常用 的 几 种 数据 类 型 
表 5-2 BSON 数据 类 型 
类 型 说 了 明 
null 用 于 表示 空 值 或 不 存在 的 字段 





32 位 整 型 JavaScript 中 只 有 一 种 数字 类 型 ， 而 MongoDB 中 有 3 种 类 型 ， 默 认 情况 下 shell 的 数字 都 
64 位 整 型 被 MongoDB 当 作 双 精度 。 在 shell 下 修改 文档 中 的 32 位 整 型 , 也 会 被 转换 为 64 位 浮 点 数 。 
64 位 浮 点 数 | MongoDB 提供 了 NumberLong 对 象 来 包装 64 位 整 型 。 所 以 尽量 不 要 在 shell 下 修改 文档 





日 期 日 期 类 型 存储 从 标准 纪元 开始 的 毫秒 数 
正则 表达 式 “| 采用 JavaScript 的 正则 表达 式 语 法 

字符 串 字符 串 

布尔 型 布尔 型 


二 进 制 数据 _| 二 进 制 数据 
值 的 集合 表示 为 数组 。 同 JSON 数组 一 样 ， 数 组 是 一 组 值 ， 既 可 以 作为 有 序 对 象 (队列 、 栈 
数组 等 ) 来 操作 ， 也 可 以 作为 无 序 对 象 来 操作 。 数 组 中 可 以 包含 不 同 数据 类 型 的 对 象 ， 甚 至 是 嵌 
套数 组 
文档 可 以 包含 别 的 文档 ， 也 可 以 嵌入 到 父 文档 中 。 内 翌 文 档 就 是 把 整个 MongoDB 文档 作 
内 翌 文 档 为 男 一 个 文档 中 键 的 值 。 与 数组 一 样 ，MongoDB 能 够 理解 内 概 文档 的 结构 ， 并 构建 索引 、 
执行 查询 、 进 行 更 新 等 
在 MongoDB 中 的 文档 需要 使 用 唯一 的 关键 字 id 来 标识 它们 。 几乎 每 一 个 MongoDB 文档 
ObjectId 都 使 用 id 字段 作为 第 一 个 属性 (在 系统 集合 和 固定 容量 集合 (capped collection) 中 有 一 些 例 
外 )。_id 值 可 以 是 任何 类 型 ， 最 常见 的 做 法 是 使 用 ObjectId 类 型 


ObjectId 是 id 的 默认 类 型 ， 是 全 局 唯一 的 ， 由 12 个 字 节 组 成 ， 每 个 字 节 是 两 位 十 六 进 
制 数 字 ， 总 共 是 一 个 24 位 的 字符 串 。 其 中 0 一 3 字 节 是 时 间 戳 (单位 秒 )，4 一 6 字 节 是 主机 名 
散 列 值 ，7 和 8 字 节 是 PID( 进 程 标识 符 ， 确 保 每 个 进程 的 ObjectId 不 同 )，9 一 11 字 节 是 计数 
器 (确保 同一 进程 的 同 - ne 产生 的 ObjectId 不 同 ， 最 大 值 为 256 的 3 次 方 )。 
集合 就 是 一 组 文档 的 组 合 。 如 果 将 文档 类 比 成 数据 库 中 的 行 ， 那 么 集合 就 可 以 类 比 成 数 
据 库 中 的 表 。 可 使 用 show collections 显示 当前 数据 库 中 的 集合 。 

MongoDB 中 的 集合 是 无 模式 的 ， 关 系 型 数据 库 中 表 的 结构 是 固定 的 ， 但 是 MongoDB 
中 集合 存储 的 文档 的 结构 可 以 是 不 同 的 ， 比 如 下 面 的 两 个 文档 可 以 同时 存 入 一 个 集合 中 : 


em 





mn mn mm 


{"name mengxiangyue"} {"Name mengxiangyue gender male"} 


MongoDB 中 有 一 种 特殊 类 型 的 集合 一 一 固定 集合 (Capped Collection)， 也 就 是 固定 大 小 
的 集合 ， 在 创建 时 要 预先 指定 大 小 。 如 果 空 间 用 完 ， 新 添加 的 对 象 将 会 取代 集合 中 最 旧 的 对 
象 ， 以 永远 保持 最 新 的 数据 。 它 自动 维护 插入 顺序 ， 在 某 些 特殊 的 使 用 场景 中 非常 有 效 ， 如 
记录 日 志 的 场景 ， 某 监控 软件 只 保留 一 个 月 的 监控 数据 可 查 。 例 如 : 


db.createCollection( "log", { capped: true, size: 12, max: 50, autoIndexId: 
false } ) 




















。140 。 Web 前 端 开发 技术 一 一 HTML5+Ajax+jQuery 


capped: 是 否 启 用 集合 限制 ， 如 果 开启 则 需要 指定 size 值 。 

size: 限制 集合 使 用 空间 的 大 小 ， 如 果 指 定 的 值 小 于 4096， 则 集合 的 空间 大 小 为 4096 
字 节 ， 如 果 大 于 4096 则 会 分 配 相近 的 256 整数 倍 大 小 的 空间 。 

max: 集合 中 的 最 大 条 数 限制 ， 默 认为 没有 限制 。 

autoIndexId: 是 否 使 用 id 作为 索引 ， 默 认为 使 用 ， 值 为 tue。 

下 面 的 例子 进行 批量 插入 数据 : 


EGF (i=17i<1002i4+) { 

db.log.insert ({'loginfo' : 'loginfo','loglevel' : 'loglevel', 'insertid' : i}) 
} 

db.1og.count () ;// 输 出 37 



































通过 调用 count 函数 得 到 的 输出 结果 为 37， 而 我 们 插入 了 99 条 数据 ， 可 见 插 入 的 数据 
已 经 超过 了 4096 字 节 。 

如 果 需 要 删除 一 个 集合 ， 可 以 使 用 drop0 函 数 ， 例 如 : 

db.1og.drop () ;// 输 出 true 

我 们 已 经 对 MongoDB 的 基本 概念 有 所 了 解 ， 下 面 来 设计 人 人 微 博 网 站 的 数据 库 。 在 
第 2 章 中 我 们 分 析 了 用 户 个 人 信息 界面 的 需求 ， 这 里 参考 表 2-1 的 分 析 结 果 ， 对 用 户 表 结构 
设计 如 下 ( 见 表 5-3)。 

表 5-3 users 文档 结构 























字段 | 说 明 | 类 型 | 备注 
a J 
login_name 登录 名 唯一 
nick_name 昵称 Strine 唯一 
img 缩 略 图 地 址 String 
Teal name 真实 姓名 
provinceValue | 所 在 省 份 编号 
provinceName | 所 在 省 份 名 称 
cityValue 所 在 城市 编号 
cityName 所 在 城市 名 称 
gender 性 别 只 有 male 和 female 两 个 可 选 值 
age 年 龄 
other_email 备用 邮箱 
blog 博客 地 址 
qq QQ 
pwd 密码 String 
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( 续 表 ) 
字 段 说 明 备 注 

msn MSN MSN 
birthday 生日 
status 记录 是 和 否 有 效 
人 NumberLong, 要 RA 

00:00:00 UTC 到 现在 的 毫秒 数 





发 布 的 微 博 应 该 包含 文字 信息 、 图 片 信息 、 发 布 日 期 等 ， 下 面 是 微 博 内 容 的 表 结 构 设 计 


( 见 表 5-4)。 
表 5-4 weibos 文档 结构 
字 段 说 明 类 型 备 注 

id 主键 id 数字 类 型 
User_id 发 布 者 id 数字 类 型 非 空 
user_nickName | 发 布 者 昵称 String 
user_head_img | 发 布 者 缩 略 图 地 址 | String 
img 微 博 图 片 地 址 String 
content 微 博 内 容 String 非 空 
status 记录 是 否 有 效 布尔 型 

NumberLong, 从 1970-01-01 00:00:00 UTC 到 现在 
timestamp 微 博 创 建 时 间 

的 毫秒 数 





用 户 之 间 可 以 互相 关注 ， 用 户 和 粉丝 之 间 的 关系 用 myfans 文档 保存 ， 
档 结构 ( 见 表 5-5)。 


表 5-5 myfans 文档 结构 





下 面 是 myfans 文 




















字 段 说 明 类 型 备 注 
id 主键 id 数字 类 型 

followed_id | 被 关注 用 户 id | 数字 类 型 

fans id 粉丝 用 户 id 数字 类 型 

status 记录 是 否 有 效 | 布尔 型 

timestamp 创建 时 间 NumberLong, 从 1970-01-01 00:00:00 UTC 到 现在 的 毫秒 数 
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5.4 MongoDB 常用 命令 


插入 数据 


当 我 们 向 某 集合 中 插入 文档 时 ， 如 果 该 集合 不 存在 ，MongoDB 会 自动 创建 该 集合 ， 不 
需要 手动 创建 集合 ， 同 时 也 不 需要 指定 文档 的 结构 。 例 如 : 





j 
k 


= {name:"mongo"} 
= {x:3} 


db.users.insert (j) 
db.users.insert (k) 


文档 必须 有 一 个 _id 键 。 这 个 键 的 值 可 以 是 任何 类 型 ， 默认 是 ObjectId 对 象 。 如 果 插 





入 文档 的 时 候 没 有 _id 键 ， 系 统 会 自动 创建 一 个 。 如 果 我 们 自己 指定 id 的 值 ， 要 明确 id 
键 的 类 型 ， 不 然 如 果 我 们 保存 id 键 时 使 用 字符 串 类 型 ， 查 询 时 使 用 数字 类 型 ， 就 查 不 到 
5.4.2 ”查询 数据 

MongoDB 最 大 的 功能 之 一 就 是 它 支 持 动 态 查 询 ， 这 与 传统 的 关系 型 数据 库 查 询 一 样 ， 
但 是 它 的 查询 更 灵活 。 

1. 查询 所 有 记录 


最 简单 的 查询 是 查询 集合 中 的 所 有 记录 ， 例 如 : 


db.users.find() 
db.users.find({}) 


这 里 ， 表 达 式 对 象 是 一 个 空 文档 ， 在 查询 的 时 候 匹 配 所 有 的 记录 。 再 看 下 面 的 代码 : 


db.users.find({'last name': 'Smith'}) 


这 里 ， 我 们 将 查询 出 所 有 last_name 属性 值 为 Smith 的 文档 记录 。 

2. 查询 特定 字段 值 

MongoDB 还 支持 一 些 额外 的 参数 选项 。 例如 , 我 们 可 能 只 想 返 回 某 些 特定 的 字段 值 。 
// 返 回 除 了 pwd 字段 外 的 所 有 字段 





db.users.find({}, {pwd:0}); 











// 返 回 1ogin_name 等 于 weibole163.com 除了 pwd 的 所 有 列 
db. users.find( { login name : "weibolel163-com' }, { pwd : 0 } ); 


// 只 返回 1ogin_name 字段 


db.user.find({ id:6}, {login name:1}); 
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3. 查询 表达 式 


在 查询 文档 时 ， 还 可 以 使 用 条 件 表 达 式 ， 使 用 or 表达 式 的 例子 为 


db.users.find({ '$or' : [{'name' : 'hurry'}, {'age' : 18}] },{'name' :1, 'age': 
“ki 5: TI 


这 相当 于 关系 型 数据 库 中 的 : 
select name, age, skills from users where name = 'hurry' or age = 18; 
Sne 的 意思 是 not equal( 不 等 于 )， 例 如 : 


// 查 询 id 不 等 于 1 的 文档 
db.user.find({ id:{$ne:1}}) 


我 们 还 可 以 使 用 大 于 ($g)、 小 于 ($l)、 大 于 等 于 ($gte)、 小 于 等 于 ($lte) 表 达 式 ， 例 如 : 


// 查 询 age 大 于 等 于 20 小 于 等 于 30 的 文档 
db.users.find({'age' : {'$gte' : 20，'$lte' : 30}}); 


还 有 其 他 一 些 表达 式 ， 如 表 5-6 所 示 。 


表 5-6 查询 表达 式 
表达 式 对 应 关系 型 数据 库 sql 语句 
Select * from users Where age in (10, 
$in、Snin db.users.find( {‘age' : {'$in' : [10, 22, 26]}}); 


22, 26); 

匹配 null Select * from users where age is null; 
like(MongoDB 支 select * from users Where name like 
持 正 则 表达 式 ) "oohurry%o"; 

distinct select distinct (name) from users: 
count select count(*) from users; 


4. 分 页 查询 
MongoDB 还 支持 使 用 skip 和 limit 命令 来 进行 分 页 查询 ， 例 如 : 


// 跳 过 前 10 条 记录 

db.users.find() .skip(10); 
// 每 页 返回 8 条 记录 
db.users.find() .1imit(8) > 

// 跳 过 前 20 条 记录 ， 并 且 每 页 返回 10 条 记录 
db.users.find() .skip(20) .limit (8); 


db.users.find( {name:/hurry/}); 





5. 对 结果 进行 排序 


// 先 按照 id 升序 排列 ， 再 按 1ogin_name 降序 排序 


db.users.find() .sort ({_id:1,1login name:-1}); 
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其 中 1 表示 升序 ，-1 表示 降序 。 
5.4.3 ”删除 数据 


下 面 是 删除 数据 的 示例 : 
// 删 除 id 为 2 的 数据 


db.users.remove ({"id":2}); 
// 删 除 所 有 数据 


db.users .remove () 7 


5.4.4 更 新 数据 
MongoDB 最 常用 的 更 新 命令 是 update 命令 ， 它 的 语法 为 : 
db.collection.update( criteria, objNew, upsert, multi ) 


criteria: update 的 查询 条 件 ， 类 似 SQL 语句 update 内 where 后 面 的 部 分 。 

objNew: update 的 对 象 和 一 些 更 新 的 操作 符 (如 $set 和 $inc) 等 ， 也 可 以 理解 为 SQL 语句 
update 内 set 后 面 的 部 分 。 

upsert: 这 个 参数 的 意思 是 如 果 不 存在 update 的 记录 ， 是 和 否 插入 objNew，true 为 插入 ， 
false 为 不 插入 。 默 认 是 false。 

multi: 默认 是 false， 只 更 新 找到 的 第 一 条 记录 ， 如 果 这 个 参数 为 tue， 就 把 按 条 件 查 出 
的 多 条 记录 全 部 更 新 。 

$set 的 语法 为 : 

{ $set : { field : value } } 


相当 于 SQL 的 set field = value， 全 部 数据 类 型 都 支持 $set。 例 如 : 


db.users.find( { " id" : 2 } ); 

// 输 出 { "id" : 2, "login name" : "weibol@163.com", "gender" : "male", 
//"nick name™" : "111111", "pwd" : "111111", "status" : true, "timestamp" : 
//NumberLong ("1425865794104") } 


db.users.update( {" id" :2}, {S$set:{ "login name" : "weibo2@163.com "} } ); 
// 输出 WriteResult ({ "nMatched" : 1, "nUpserted" : 0, "nModified" : 1 }) 


db.users.find( { ”id : 2 7 

// 输 出 { ”id"” : 2, "login name" : "weibo2@163.com", "gender" : "male", 
/i/"nick name™” : "111111", "pwd” : "111111", "status” : true "timestamp" : 
//NumberLong ("1425865794104") } 


S$inc 的 语法 为 : 





Lm field : value } } 


意思 是 对 数字 字段 field 增加 value， 例 如 : 
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db.usersfind( { ”id 了 下拉 


// 输 出 { "id" : 2, "login name" : " weibo2@163.com ", "gender" : "male", 
//"nick name”: "111111", "pwd™ : "111111", "status" : true, "timestamp™ : 
//NumberLong ("1425865794104"), "login name" : " weibo2@163.com ", "age" 
//10000 } 


db-.users.update( { ”id : 2}, { $inc : { "age"”: -9000 } } )7 


db.users.find( {" id" 2 1)7 

// 输 出 { "_id" : 2, "login name" : " weibo2@163.com ", "gender" : "male", 
//"nick name"”: "111111", "pwd” : "111111", “status" : true, "timestamp" : 
//NumberLong ("1425865794104"), "login name" : " weibo2@163.com ", "age™" : 
//1000 } 


5.4.5 索引 

索引 是 一 种 提高 查询 速度 的 机 制 ， 数 据 库 索 引 有 些 像 书籍 的 目录 ， 有 了 目录 就 不 需要 翻 
遍 整 本 书 。 索 引 在 数据 结构 上 可 以 分 为 B 树 索引 、 位 图 索引 和 散 列 索引 。MongoDB 使 用 的 
是 B 树 索引 。 根 据 不 同 的 应 用 需求 ， 还 可 以 分 成 唯一 索引 (nique)、 稀 玻 索 引 (sparse) 等 几 种 

可 使 用 createIndex 创建 索引 ， 例 如 ; 

db.users.createIndex({_id: 1}) 

索引 的 方向 为 1 或 -1: 1 表示 升序 ，-1 表示 降序 。 

1. 唯一 索引 

唯一 索引 在 创建 时 加 上 unique:true 选项 即 可 ， 创 建 命令 如 下 : 

db.users.createIndex({_id: 1}, {unique: true}) 

上 面 的 唯一 索引 创建 后 ， 如 果 insert 一 条 _id 已 经 存在 的 数据 ， 则 会 报 如 下 错误 : 

E11000 duplicate key error index 

如 果 我 们 在 一 个 已 有 数据 的 collection 上 创建 唯一 索引 ， 若 唯一 索引 对 应 的 字段 原来 就 
有 重复 的 数据 项 ， 那 么 创建 会 失败 , 需要 加 上 一 个 dropDups 选项 来 强制 将 重复 的 项 删除 , 命 
令 如 下 : 





db.users.createIndex ({age: 1}, {unique: true, dropDups: true}) 

上 面 的 语句 有 一 点 需要 注意 , 如 果 有 的 文档 上 没有 age 字段 ,而 我 们 又 使 用 了 dropDups: 
true， 那 么 创建 唯一 索引 时 MongoDB 将 删除 没有 age 字段 的 文档 。 如 果 配 合 使 用 即将 讲 到 的 
sparse:true 选项 ， 数 据 库 将 保留 没有 age 字段 的 文档 。 代 码 如 下 : 


db.users.createIndex ({age: 1}, {unique: true, dropDups: true，sparse: true }) 
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2. 松散 索引 

当 数 据 中 没有 某 个 字段 或 字段 值 为 null 时 ， 如 果 在 这 个 字段 上 建立 普通 索引 ， 那 么 无 此 
字段 或 此 字段 值 为 null 的 文档 也 会 参与 到 索引 结构 中 ， 占 用 相应 的 空间 。 如 果 我 们 不 希望 这 
些 值 参与 到 索引 中 ， 可 以 采用 松散 索引 ， 松 散 索 引 只 会 让 指定 字段 不 为 空 的 行 参与 到 索引 创 
建 中 来 。 创 建 一 个 松散 索引 可 以 用 下 面 的 命令 : 


qdb .users .createInqdex ({age: 1}, {sparse: true}) 


3. 后 台 创建 索引 
创建 索引 时 数据 库 会 阻塞 ， 如 果 和 希望 在 索引 创建 的 过 程 中 ， 数 据 库 还 可 以 正常 地 读 写 ， 
可 以 指定 background 为 tue， 默 认 值 是 false。 例 如 : 


db.people.createIndex( { zipcode: 1}, {background: true} ) 


4. 为 排序 创建 索引 

在 查询 数据 的 时 候 经 常 对 结果 集 进行 排序 , 这 时 候 就 会 使 用 索引 , 比如 我 们 创建 的 索引 : 
db.records.createIndex( { a: 1 } ) 

在 排序 中 使 用 索引 能 够 提升 查询 的 性 能 ， 上 面 的 语句 能 够 支持 如 下 对 a 字段 的 排序 : 


db.records.find().sort( {a: 1 }) 
db .records .find() .sort( { a: -1 } ) 


用 户 可 以 在 多 个 列 上 建立 索引 ， 这 种 索引 叫做 复合 索引 (组 合 索引 )。 如 果 使 用 了 复合 索 
引 ， 对 结果 集 进行 排序 的 时 候 需 要 注意 ， 比 如 : 

db.records.createIndex( { a: 1, b: 1 }) 

它 能 够 支持 的 排序 有 { a: 1, b: 1}, 但 不 支持 { b: 1, a: 1}, 使 用 复合 索引 排序 时 需要 指定 相 
同 的 排序 方向 或 完全 相反 的 排序 方向 , 上 面 的 语句 还 支持 对 { a: -1, b: -1} 排 序 , 但 不 支持 对 { a: 
-1,b: 1} 排 序 。 

一 般 来 说 ， 如 果 索 引 包含 N 个 键 ， 则 对 于 前 几 个 键 的 查询 会 有 帮助 。 比 如 有 个 索引 
a 实际 上 有 了 TE} 等 索引 。 得 是 
使 用 {"b":1}、{"a":1,"e":1} 等 的 排序 (或 查询 ) 则 不 会 优化 ， 只 有 使 用 索引 前 部 的 排序 (或 查询 ) 
才能 使 用 该 索引 。 

5. 查询 索引 

可 以 使 用 getIndexes 方法 查询 集合 上 的 所 有 索引 ， 例 如 : 


qdb .users .getIndexes () 





运行 结果 如 图 5-7 所 示 。 
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> dhb-users -getIndexes(> 
[ 


ov :1 


"unidque 





图 5-7 查询 索引 


6. 删除 索引 


dropIndex0 方 法 可 以 删除 索引 ， 它 的 参数 可 以 是 索引 名 称 ， 也 可 以 是 创建 索引 时 的 文档 
格式 。 例 如 : 

db.users.dropIndex( "age 1" ) 

db.users.dropIndex( { "age" : 1 }) 

人 人 微 博 网 站 中 users 文档 的 登录 名 和 昵称 要 求 唯一 ，myfans 文档 的 followed_id 和 
fans id 组 合 唯一 ， 下 面 是 实现 代码 : 

db.myfans.createIndex ({'followed id': 1,'fans id':1} , {unique: true, 


dropDups: true }) 
db.users.createIndex ({'login name': 1} , {unique: true, dropDups: true }) 


本 章 小 结 


本 章 我 们 学 习 了 MongoDB 的 基本 概念 ， 重 点 介绍 了 查询 语句 和 索引 。 

索引 也 有 一 些 缺 点 ， 创建 索引 和 维护 索引 要 耗费 时 | 间 ， 这 种 时 间 随 着 数据 量 的 增加 而 增 

加 ， 索 引 需 要 占用 物理 空间 。 如 果 要 建立 聚 簇 索 引 ， 那么 需要 的 空间 就 会 更 大 。 当 对 表 中 的 

数据 进行 增加 、 删 除 和 修改 的 时 候 ， 索 引 也 要 动态 维护 ， 这 样 就 降低 了 数据 的 维护 速度 。 如 

果 查 询 要 返回 集合 中 一 半 以 上 的 结果 ， 则 用 表 扫 描 比 查询 索引 要 高 效 一 些 。 所 以 在 创建 索引 
时 应 该 考虑 会 做 什么 样 的 查询 ， 还 要 考虑 哪些 键 需 要 索引 以 及 如 何 使 得 创建 的 索引 具有 可 扩 
展 性 。 








4 注 
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本 章 练习 


1. MongoDB 的 文档 格式 是 什么 ? 
2. MongoDB 的 适用 场景 是 什么 ? 


第 6 章 jQuery 


为 了 帮助 开发 人 员 构 建 Web 应 用 , 出 现 了 被 称 为 库 或 框架 的 JavaScript 代码 集合 .jQuery 
是 目前 世界 上 JavaScript 领域 最 受 欢 迎 的 库 ， 它 能 够 大 大 提高 编程 的 效率 。 

本 章 内 容 : 

@ jQuery 是 什么 及 其 作用 

@ 使 用 jQuery 处 理 DOM 

@ 使 用 jQuery 处 理事 件 


6.1 jQuery 人 门 


6.1.1 jQuery 初 体验 


jQuery 是 一 个 快速 、 体 积 小 、 功 能 丰富 的 JavaScript 库 。 它 通过 一 个 跨 多 种 浏览 器 的 易 
于 使 用 的 API 使 得 很 多 事情 变 得 更 容易 , 例如 HTML 文档 遍历 和 操作 、 事 件 处 理 、 动 画 效果 
以 及 Ajax 交互 。 它 兼容 各 种 浏览 器 ， 比 如 正 浏览 器 、Opera 浏览 器 等 ,但 是 在 2.0 版 本 以 及 
后 续 版 本 中 将 不 再 支持 下 8 及 更 新 的 版 本 。 

与 jQuery 类 似 的 JavaScript 框架 有 Prototype、Yui、Ext、Dojo 等 ， 随 着 jQuery 的 不 断 
发 展 ，jQuery 已 经 成 为 最 流行 的 JavaScript 框架 ， 全 世界 访问 量 最 大 的 前 10 000 个 网 站 中 ， 
有 一 半 甚 至 一 半 以 上 都 在 使 用 jQuery。 
jQuery 的 理念 是 “write less，do more”， 它 对 许多 丰富 的 程序 功能 进行 了 封装 ， 供 其 他 
人 调用 ,使 得 Web 程序 开发 变 得 简洁 并 能 提高 开发 效率 。jQuery 的 语法 通俗 易 懂 ， 这 也 是 它 
能 够 流行 的 原因 。 例 如 ， 下 面 是 一 行 有 效 的 jQuery 代码 : 





$( "#footer" ) -hide( "slow" ).addClass( "foo" ) .show( "fast" ) 


我 们 来 猜 一 下 上 面 的 代码 是 做 什么 的 ? 第 一 部 分 $( "#footer" ) 猜 不 出 来 , 但 是 剩余 的 部 分 
很 容易 理解 : 

e hide() 方 法 会 隐藏 一 些 东 西 

eaddClass() 方 法 会 添加 一 个 CSS 类 

e@ show0 方 法 显示 一 些 东 西 

本 章 的 内 容 将 会 讲解 这 些 代码 如 何 运行 及 其 实现 的 功能 。 
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6.1.2 jQuery 环境 搭建 


jQuery 的 环境 搭建 非常 简单 ， 我 们 只 需要 下 载 jQuery 并 在 HTML 页 面 中 引入 jQuery 就 
可 以 了 。jQuery 的 官方 网 站 (http:/jQuery.com/) 提 供 了 最 新 的 jQuery 框架 下 载 链接 ， 如 图 6-1 
所 示 。 





Download jQuery 


What is jQuery? 





图 6-1 jQuery 官网 


jQuery 分 为 压缩 版 本 (min 版 本 ) 和 非 压缩 版 本 。 min 版 本 主要 应 用 于 已 经 开发 完成 的 网 页 
中 , 也 就 是 生产 环境 当中 。 而 非 压缩 版 本 的 文件 比较 大 ， 里 面 有 整洁 的 代码 书写 规范 和 注释 ， 
主要 应 用 于 网 页 开发 过 程 当中 。 

使 用 时 直接 将 该 js 文件 用 <scrip 忆 标签 引入 到 自己 的 页 面 中 即 可 ， 代 码 如 下 : 


<script src = "jQuery-2.1.1.js" ></script> 


另 一 种 使 用 jQuery 的 方案 是 , 使 用 由 内 容 分 发 网 络 (CDN) 所 提供 的 一 个 公共 版 本 。 CDN 
是 分 布 于 世界 各 地 的 快速 服务 器 ， 设 计 用 于 尽 可 能 以 最 快 的 速度 提供 文件 服务 。 其 基本 思路 
是 尽 可 能 避 开 互联 网 上 有 可 能 影响 数据 传输 速率 和 稳定 性 的 瓶颈 和 环节 , 使 内 容 传输 得 更 快 、 
更 稳定 。 通 过 在 网 络 各 处 放置 节点 服务 器 所 构成 的 在 现 有 的 互联 网 基础 之 上 的 一 层 智能 虚拟 
网 络 ，CDN 系统 能 够 实时 地 根据 网 络 流量 和 各 节点 的 连接 、 负 载 状况 以 及 到 用 户 的 距离 和 响 
应 时 间 等 综合 信息 将 用 户 的 请 求 重 新 导向 离 用 户 最 近 的 服务 节点 上 。 其 目的 是 使 用 户 可 就 近 
取得 所 需 内 容 ， 解 决 互联 网 拥挤 的 状况 ， 提 高 用 户 访问 网 站 的 响应 速度 。 对 互联 网 感 兴趣 的 
大 型 公司 (如 Google、 百 度 ) 提 供 了 免费 的 各 种 版 本 的 jQuery。 我 们 只 需要 知道 由 CDN 服务 提 
t 的 URL 就 可 以 了 ， 例 如 : 














<script src="http://apps.bdimg.com/libs/jQuery/2.1.1/jQuery.js" ></script> 
<script src = "https://code.jQuery.com/jQuery-2.1.1.js" ></script> 


6.1.3 jQuery 中 的 $ 及 其 作用 
下 面 是 一 个 最 简单 的 jQuery 程序 : 
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<script> 
$ (document) .ready (function() { 
alert ("Hello World"); 
]) 7 
</script> 


jQuery 提供 了 几 个 核心 对 象 ， 而 最 频繁 使 用 的 是 jQuery 对 象 。 它 的 语法 是 : 


jQuery (elements) 


elements 表示 一 个 或 多 个 DOM 元 素 ， 返 回 一 个 jQuery 对 象 。 为 了 编写 代码 的 方便 ， 使 


用 美元 符 “$” 来 代替 “jQuery”。 在 使 用 jQuery 编程 的 上 下 文 环境 中 ， 两 者 是 等 价 的 。$ 最 


常用 的 场景 是 用 作 选 择 器 接收 一 个 表示 CSS 选择 器 的 字符 串 , 并 返回 匹配 该 字符 串 的 一 个 或 
多 个 HTML 元 素 。 如 果 对 CSS 选择 器 比较 熟悉 ， 就 比较 容易 学 习 jQuery 的 选择 器 。 例 如 ， 
要 实现 在 网 页 中 点 击 p 标签 来 显示 内 容 ， 之 前 我 们 会 用 下 面 的 代码 实现 : 








<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8" /> 

</head> 

<body> 
<p> 我 是 第 1 个 标签 </p> 
<p> 我 是 第 2 个 标签 </p> 
<p> 我 是 第 3 个 标签 </p> 

</body> 

<script> 

var p = document .getElementsByTagName ('p'); 

for (var i =0;i<p.length;i++){ 
pl[i] .onclick=function(){ 
alert (this.innerHTML) 
} 

} 

</script> 

</html> 


使 用 jQuery 选择 器 则 可 以 这 样 实现 ， 代 码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<script src = "https://code.jQuery.com/jQuery-2.1.1.js" ></script> 
</head> 
<body> 
<p> 我 是 第 1 个 标签 </p> 
<p> 我 是 第 2 个 标签 </p> 
<p> 我 是 第 3 个 标签 </p> 
</body> 
<script> 
var p= $('p'); 
p-.click(function(){ 


。152 。 Web 前 端 开发 技术 一 一 HTML5+Ajax+jQuery 


alert ($ (this) .html ()); 

1D); 

</script> 

</html> 

上 面 的 两 段 代码 运行 效果 是 相同 的 ， 本 例 中 使 用 SCp) 获 得 了 所 有 标签 的 集合 ， 并 使 用 
html0 函 数 显示 标签 的 内 容 。 

此 外 ，$ 还 用 来 访问 jQuery 提供 的 额外 方法 及 属性 ， 比 如 $mapO、S$.eachO、$.ajaxO。 

$.map0 将 一 组 数组 转换 为 其 他 数组 , 就 是 根据 当前 数组 创建 一 个 新 的 数组 。 它 的 语法 为 : 


S$.map (arr,callback) 7 
它 有 两 个 参数 ，arr 为 当前 数组 ，callback 为 执行 的 方法 ， 用 来 改变 这 个 数组 。 例 如 : 
// 声 明 一 个 数组 


var arr = [1, 2, 3]; 

// 将 数组 转换 成 另 一 个 数组 , 第 一 个 参数 为 要 转换 的 数组 ， 第 二 个 参数 为 执行 的 方法 
Var arr2 = $.map (arr，function (item) { return item * 2; }); 
console.log (arr2); 


// 输 出 [2, 4, 6] 

$.each0) 方 法 的 语法 是 : 

$.each (arrayOrObject, callback) 

它 的 作用 是 遍历 对 象 或 数组 。 第 一 个 参数 为 需要 遍历 的 对 象 或 数组 ， 第 二 个 参数 是 对 每 
个 数组 成 员 执行 的 函数 。 例 如 : 


var users = { "name": " 王 五 "，"age": 12 }; 
$.each (users，function (key, value) { console.log(key + "为 : " + value) }); 


// 输 出 name 为 : 王 五 age 为 : 12 


还 有 其 他 一 些 实用 函数 ， 如 $.inArray0、S$.isEmptyObject0、S$.isFunction0 等 。 

jQuery 提供 了 一 个 叫做 $(document).ready0 的 方法 ， 它 表示 在 document“ 准 备 好 ”之 后 
立即 运行 代码 。 重 要 的 一 点 是 ， 要 运行 的 代码 需要 包含 在 一 个 匿名 函数 中 ， 当 ready 事件 触 
发 时 得 到 执行 。 它 与 document.onload 的 区 别 如 表 6-1 所 示 。 


表 6-1 window.onload 与 $(document).ready() 的 区 别 








window.onload 
等 待 网 页 中 所 有 的 资源 加 载 完毕 后 (包括 
图 片 、flash、 音 频 、 视 频 ) 


只 能 执行 一 个 


S$(document) .ready() 
DOM 树 加 载 完毕 后 ， 不 管 里 面 的 资源 是 
否 加 载 完 成 
可 以 执行 多 个 
3dunction0 0) 

















可 见 $(document)ready0 是 在 DOM 文档 加 载 后 就 执行 ， 而 不 必 等 待 图 片 等 文件 载 入 ， 执 
行 速度 更 快 ， 而 且 在 多 个 地 方 使 用 ready0 方 法 也 不 会 发 生 冲 突 ， 比 window.onload 函数 更 具 
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6.1.4 jQuery 对 象 和 DOM 对 象 

jQuery 通过 包装 DOM 对 象 后 产生 的 新 的 对 象 (也 就 是 jQuery 对 象 ) 来 访问 并 操作 DOM 
元 素 。jQuery 对 象 提供 了 额外 的 方法 ， 但 是 jQuery 对 象 无 法 使 用 DOM 对 象 的 方法 ，DOM 
对 象 也 不 能 使 用 jQuery 里 的 任何 方法 。 

只 需 用 $0 把 DOM 对 象 包装 起 来 就 可 以 获得 一 个 jQuery 对 象 ， 例 如 : 


var logol = $( "p"); 


但 每 次 使 用 $0 返回 的 对 象 都 是 不 同 的 ， 即 使 是 相同 的 选择 器 ， 例 如 : 
































var logol = $( "p" ); 
var logo2 = $( "p" ); 
alert (logol === logo2 ); // 输出 false 


jQuery 对 象 其 实 是 一 个 数组 对 象 ， 因 此 可 以 通过 数组 的 方法 得 到 DOM 对象 。 如 果 我 们 
不 得 不 使 用 DOM 元 素 的 方法 ， 有 如 下 两 种 方法 将 jQuery 对 象 转换 成 DOM 对 象 : 
e 使 用 数组 下 标的 方法 ， 例 如 : $Cp)[0]。 














e 使 用 jQuery 提供 的 get0 方 法 ， 该 方法 获得 由 选择 器 指定 的 DOM 元 素 ， 它 有 一 个 可 
选 的 参数 : index 编号 ， 例 如 : $('p").get(0) 表 示 获 得 第 一 个 p 元 素 。 

在 人 人 微 博 网 站 中 个 人 主页 的 需求 包括 : 

e 发 布 微 博 的 字数 不 能 超过 140 个 字 ， 当 用 户 输入 完成 后 自动 提示 还 可 以 继续 输入 的 
字数 ， 如 果 可 输入 的 字数 小 于 25， 则 红色 显示 数字 以 提醒 用 户 ， 如 图 6-2 所 示 。 


有 +0 凶 公事 3 告诉 大 宗 ? 还 可 以 给 和 2 他 


我 要 精通 jQuery 我 要 精通 jQuery 我 要 精通 jQuery 
我 要 精通 jQuery 我 要 精通 jQuery 我 要 精 遂 jQuery 





我 要 精通 jQuery ”我 要 精通 jQuery 我 要 精 遂 jQuery 
cy 





Sn EE 





图 6-2 微 博 字数 限制 


。 ， 微 博 中 显示 的 图 片 是 缩 略图 的 形式 ， 只 有 用 户 点 击 缩 略图 ， 才 会 显示 大 尺寸 的 图 片 。 
点 击 大 图 片 后 ， 重 新 显示 缩 略 图 ， 效 果 如 图 6-3 所 示 。 


二 








图 6-3 图 片 微 博 


。154 。 Web 前 端 开发 技术 一 一 HTML5+Ajax+jQuery 


本 章 将 使 用 jQuery 实现 这 两 个 功能 。 
6.2 jQuery 选择 器 


6.2.1 jQuery 基本 选择 器 


jQuery 支持 大 多 数 CSS 3.0 中 的 选择 器 ， 并 自 定义 了 一 些 选择 器 。 基 本 选择 器 包括 使 用 
元 素 id、class、 元 素 名 等 ， 基 本 选择 器 可 以 实现 大 多 数 页 面 查找 。 详 细 说 明 如 表 6-2 所 示 。 





表 6-2 基本 选择 器 
根据 给 定 的 ID 匹配 一 个 元 素 


根据 给 定 的 元 素 名 号 配 所 有 元 素 

根据 给 定 的 class 匹配 元 素 

.class.class | 根据 给 定 的 多 个 class 匹配 元 素 $(".intro.demo") 
所 有 元 素 se) 


对 于 下 面 的 HTML 代码 示例 ， 我 们 可 以 使 用 表 6-2 中 的 选择 器 来 选择 相应 的 元 素 : 








<p>This is a paragraph, which means it is wrapped in <code>&lt;p&gt;</code> 
<span>and</span> <code>&glt; /pg&gt;</code>. Those "p" tags in the previous 
sentence are formatted as <code>&glt;codeggt;</code>.</p> 
<ul id="myUl"> 
<li>This is the first list item (<code>&glt;liggt;</code>) in an unordered 
list (<code>glt;ulggt;</code>). </1i> 
<li>This is the second list item. It has a <a rel="self" title="Learning 
jQuery blog" href="/archives/jQuery-links.htm">link</a> in it.</li> 
<li class="myclass otherclass">This is the third list item. It has a 
<code>class</code> of "myclass otherclass"</1i> 
<li>This is the fourth list item. It has <strong>strong</strong> text and 
<em>em</em>phasized <em>text</em>. 
<ul> 
<li>second-level list item 1</1i> 
<li>second-level list item 2</1i> 
</ul> 
</1i> 
</ul> 


我 们 可 以 使 用 S(#myid”) 选 择 列表 区 域 ， 使 用 SCcode) 选 择 所 有 的 code 元 素 的 集合 ,使 
$Cmyclass) 选 择 使 用 了 myclass 类 的 元 素 集合 。 还 可 以 一 次 使 用 多 个 选择 器 ， 例 如 : 


$(' code, .myclass ') 


选择 的 区 域 如 图 6-4 所 示 。 














Am 
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This is a paragraph, which means it is wrappedin 可 ?and WB>. Those "p" tags in 
the preyious sentence are formatted as ‘<code>. 


。 Thisisthe first list item ( 克 动 )in an unordered list ( xD). 
。 This is the second list item. It has a link in it. 
. 


» This is the fourth list item. It has strong text and emphasized text. 
° second-level list item 1 
9 second-level list item 2 








图 6-4 选择 的 区 域 


6.2.2 jQuery 层次 选择 器 


层次 选择 器 通过 DOM 元 素 间 的 层次 关系 获取 元 素 , 其 主要 的 层次 关系 包括 后 台 、 父 子 、 
相 邻 、 兄 弟 关 系 ， 通 过 其 中 某 类 关系 可 以 方便 地 定位 元 素 ， 如 表 6-3 所 示 。 


根据 祖先 元 素 匹 配 所 有 的 后 代 元 素 元 素 集合 


表 6-3_ 层 次 选择 器 


根据 父 元 素 匹 配 所 有 的 子 元 素 元 素 集合 
匹配 所 有 紧 接 在 prev 元 素 后 的 相 邻 元 素 
匹配 prev 元 素 之 后 的 所 有 兄弟 元 素 元 素 集合 





例如 ， 使 用 SCstrong + em) 选 择 器 的 结果 如 图 6-5 所 示 。 


。 This is the fourth list item. It has strong text and emphasized text. 


图 6-5 ”使 用 $(strong + em') 选 择 器 的 结果 


使 用 $('strong ~ em') 选 择 器 的 结果 如 图 6-6 所 示 : 
This is the fourth list item. It has strong text and phasized 站 


图 6-6 使 用 $(strong ~em) 选 择 器 的 结果 


6.3 jQuery 过 滤 选 择 器 


一 般 来 说 ， 通 过 选择 器 获得 元 素 的 集合 后 ， 就 可 以 使 用 jQuery 方法 对 其 执行 某 种 操作 ， 
比如 用 hide(0 方 法 将 其 隐藏 。 这 就 需要 从 集合 中 筛选 一 部 分 元 素 ， 在 这 种 情况 下 ， 可 以 在 基 
本 选择 器 的 基础 上 添加 过 滤 选 择 器 来 完成 筛选 任务 。 根 据 不同 的 具体 情况 ， 在 过 滤 选 择 器 中 
可 以 使 用 元 素 的 索引 值 、 内 容 、 属 性 、 子 元 素 位 置 、 表 单 域 属性 等 作为 筛选 条 件 。 下 面 来 看 
看 jQuery 提供 了 哪些 过 滤器 来 帮助 我 们 完成 此 任务 。 


6.3.1 jQuery 基本 过 滤 
过 滤 选 择 器 根据 某 类 过 滤 规 则 进行 元 素 的 匹配 ， 书 写 时 都 以 冒号 CD 开头， 简单 过 滤 选 择 
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器 是 过 滤 选 择 器 中 使 用 最 广泛 的 一 种 ， 其 详细 说 明 如 表 6-4 所 示 。 























表 6-4_ 基 本 过 滤 
选 择 器 功 能 返回 值 

:first 获取 第 一 个 元 素 。 等 价 于 first0 函 数 元 素 集合 
:last 获取 最 后 一 个 元 素 。 等 价 于 last0 函 数 元 素 集合 
-not(selector) 获取 除 给 定 选 择 器 外 的 所 有 元 素 元 素 集合 
:even 匹配 偶数 号 元 素 元 素 集合 
:odd 匹配 奇数 号 元 素 元 素 集合 
:eq(n) 配 页 面 中 第 n 个 元 素 。 等 价 于 eq0 函 数 元 素 集合 
:gt(n) 匹配 页 面 中 第 n 个 元 素 之 后 的 所 有 元 素 
:lt 匹配 页 面 中 第 n 个 元 素 之 前 的 所 有 元 素 
:header 获取 所 有 标题 类 型 的 元 素 
:animated 获取 正在 执行 动画 效果 的 元 素 
:hidden 获取 所 有 不 可 见 元 素 ， 或 者 type 为 hidden 的 元 素 
Visible 获取 所 有 可 见 元 素 





6.3.2 jQuery 内 容 过 滤 


有 时 需要 根据 元 素 中 的 文字 内 容 或 所 包含 的 子 元 素 特征 来 匹配 元 素 ， 这 就 是 内 容 过 滤 选 
择 器 。 其 文字 内 容 可 以 模糊 或 绝对 匹配 元 素 。 详 细 说 明 如 表 6-5 所 示 。 


表 6-5 内 容 过 滤 











选择 器 功 能 示例 
S$("div:contains( 我 )") 选 取 含 有 
:contains(text) 选取 包含 内 容 为 text 的 元 素 
“我 ” 字 的 <div> 元 素 
选取 不 包含 子 元 素 或 文本 的 _ S$("div:empty") 选 取 不 包含 子 元 素 
:empty 元 素 集合 
空 元 素 (包括 文本 ) 的 <div> 元 素 
选择 含有 选择 器 所 匹配 的 元 _ $("div:has(p)") 选取 含有 <p> 元 素 
-has(seletor) 元 素 集合 
素 的 元 素 的 <div> 元 素 
选择 含有 子 元 素 或 者 文本 的 
:parent 元 素 集合 





元 素 


6.3.3 jQuery 子 元 素 过 滤 


有 时 需要 根据 子 元 素 的 位 置 进行 匹配 ， 比 如 ， 呈 




















虽然 使 


基本 过 滤 选 择 器 :eq(index) 可 以 实 


现 单个 表格 的 显示 ， 但 不 能 满足 大 量 数据 和 多 个 表格 的 选择 需求 ， 比 如 表格 子 元 素 的 个 数 动 
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态 增 加 ， 如 果 匹 配 表格 最 后 一 个 元 素 ， 显 然 





元 素 过 滤 选 择 器 ， 详 细 说 明 如 表 6-6 所 示 。 


表 6-6_ 子 元 素 过 滤 


固定 的 :eq(index) 不 能 满足 要 求 。 这 时 可 以 使 用 














子 





nth-child(eqlevenloddlindex) 


获取 每 个 父 元 素 下 的 特定 位 置 元 素 ， 索 引号 从 1 开始 





元 素 集合 












:first-child 
:last-child 


获取 每 个 父 元 素 下 的 第 一 个 子 元 素 


获取 每 个 父 元 素 下 的 最 后 一 个 子 元 素 
获取 每 个 父 元 素 下 的 仅 一 个 子 元 素 


6.3.4 jQuery 属性 过 滤 










元 素 集合 








元 素 集合 


元 素 中 通常 包含 多 个 属性 ， 除 了 使 用 id 和 class 属性 作为 选择 器 外 ， 还 可 以 使 用 其 他 属 
性 对 集合 进行 过 滤 。 进 一 步 得 到 具有 某 个 属性 或 属性 满足 一 定 规则 的 元 素 集合 。 属 性 过 滤 选 
择 器 包含 在 方 括号 内 ， 而 不 是 以 冒号 开头 。 详 细 说 明 如 表 6-7 所 示 。 





表 6-7 属性 过 小 





























选择 器 功 能 示 例 
本 | sodivfidj) 选 取 拥 有 属性 id 
attribute] 选取 拥有 此 属性 的 元 素 集合 元 素 _ 
的 元 素 
$("div[title=test]") 选取 属性 
attribute=value] 选取 属性 的 值 为 value 的 元 素 | 集合 元 素 
title 为 "test" 的 <div> 元 素 
S$("div[title!=test]") 选 取 属 性 
选取 属性 的 值 不 等 于 value 的 title 不 等 于 "test" 的 <div> 元 素 
attribute!=value] 集合 元 素 
元 素 ( 注 : 没有 属性 title 的 <div> 元 
素 也 会 被 选取 ) 
选取 属性 的 值 以 value 开始 的 S$("divftitle^=test]") 选 取 属 性 
attribute^=value] 集合 元 素 
元 素 title 以 "test" 开 头 的 <div> 元 素 
选取 属性 的 值 以 value 结尾 的 S$("div[ftitle$=test]") 选 取 属 性 
[attribute$=value] 集合 元 素 
元 素 title 以 "test" 结 束 的 <div> 元 素 
$("div[title*=test]") 选 取 属 性 
[attribute*=value] 选取 属性 的 值 含有 value 的 元 素 
title 含有 "test" 的 <div> 元 素 
属性 选择 器 合并 成 一 个 复合 S$("div[id]j[title$='test]") 选 取 拥 


[selectorl [selector2][selector] 











的 属性 选择 器 , 满足 多 个 条 件 。 
每 选取 一 次 ， 缩 小 一 次 范围 





集合 元 素 





有 属性 id， 并 且 属 性 title 以 
"test" 结 束 的 <div> 元 素 
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6.3.5 jQuery 表单 属性 过 滤 

为 了 提高 使 用 表单 的 效率 , 在 jQuery 选择 器 中 引入 表单 属性 过 滤 选 择 器 ,该 选择 器 专 为 
表单 量 身 打造 ， 通 过 它 可 以 在 页 面 中 快速 定位 某 表单 对 象 。 既 可 以 通过 表单 中 元 素 的 类 型 ， 
也 可 以 通过 表单 中 元 素 的 当前 状态 进行 过 滤 。 详 细 说 明 如 表 6-8 所 示 。 








表 6-8 表单 属性 过 波 














选择 器 功 能 返回 值 示例 

选取 所 有 的 input、textarea、 
pt button、select 元 素 ee 
:text 选取 所 有 的 单行 文本 框 集合 元 素 $(":text") 选 取 所 有 的 单行 文本 框 
:password | 选取 所 有 的 密码 框 合 元 素 $(":password") 选 取 所 有 的 密码 框 
:radio 选取 所 有 的 单 选 框 $(":radio") 选 取 所 有 的 单 选 框 
:checkbox | ”选取 所 有 的 多 选 框 集合 元 素 $(":checkbox") 选 取 所 有 的 多 选 框 
:submit 选取 所 有 的 提交 按钮 集合 元 素 $(":submit") 选 取 所 有 的 提交 按钮 
:image 选取 所 有 的 图 形 集合 元 素 $(":image") 选 取 所 有 的 图 形 


:Teset 选取 所 有 的 重 置 按钮 集合 元 素 $(":reset") 选 取 所 有 的 重 置 按钮 
:button 选取 所 有 的 按钮 集合 元 素 $(":button") 选 取 所 有 的 按钮 

:file 选取 所 有 的 上 传 域 集合 元 素 $(":file") 选取 所 有 的 上 传 域 
$("#forml :enabled") 选 取 id 为 "fonn1" 
的 表单 中 的 所 有 可 用 元 素 

$("#forml :disabled") 选 取 id 为 "fonn1" 


游 
了 
Hl 
洲 


:enabled 选取 所 有 可 用 元 素 集合 元 素 





:disabled 选取 所 有 不 可 用 元 素 集合 元 素 
™ 人 嵌 的 表单 中 的 所 有 不 可 用 元 素 

选取 所 有 被 选中 的 元 素 ( 单 选 框 、 $("input :checked") 选 取 所 有 被 选中 
:checked 集合 元 素 l 

复 选 框 ) 的 <input> 元 素 

选取 所 有 被 选中 的 选项 元 素 ( 下 $("select :selected") 选 取 所 有 被 选中 
:selected 集合 元 素 

拉 列 表 ) 的 选项 元 素 


6.4 jQuery 操作 DOM 元 素 


6.4.1 ”元素 的 创建 


我 们 已 经 熟悉 DOM 模型 ， 它 由 页 面 中 的 各 个 元 素 形成 的 节点 相互 关联 形成 树 状 结构 。 
jQuery 可 以 动态 地 创建 DOM 元 素 ， 并 添加 到 指定 的 节点 位 置 。 动 态 创建 页 面 元 素 的 语法 
如 下 : 


$ (html) 
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html 表示 有 效 的 html 标记 字符 串 ， 例 如 : 


Var article= 
$ (<article idq='weibol' class='welibo'></article>) 











或 者 使 用 下 面 的 代码 : 


$( "<article/>", {id:"weibol",class:"weibo"}) 





6.4.2 元素 的 插入 


动态 地 创建 完成 DOM 元 素 后 ， 还 需要 执行 节点 的 插入 或 追加 操作 。 表 6-9 中 的 4 个 方 
法 可 以 很 容易 地 添加 新 元 素 。 





表 6-9 元 素 的 插入 

办 “ 滨 描述 
appendO 向 每 个 匹配 元 素 的 内 部 的 结尾 处 追加 内 容 
appendTo0 将 内 容 追 加 到 指定 元 素 的 内 部 的 结尾 处 
prepend0 向 每 个 匹配 元 素 的 内 部 的 开始 处 插入 内 容 
prependTo 将 内 容 插 入 到 指定 元 素 的 内 部 的 开始 处 
after0 向 每 个 匹配 的 元 素 之 后 插入 内 容 
insertAfterO) 将 每 个 匹配 的 元 素 插入 到 指定 元 素 之 后 
before0 向 每 个 匹配 的 元 素 之 前 插入 内 容 
insertBefore0) 将 每 个 匹配 的 元 素 插入 到 指定 元 素 之 前 


6.4.3 元素 的 删除 


元 素 的 删除 分 为 删除 指定 的 DOM 元 素 和 从 指定 元 素 中 删除 所 有 的 子 节点 。jQuery 提供 
了 3 种 方法 : remove() 方 法 、empty0 方 法 和 detach() 方 法 。 
remove() 方 法 会 删除 DOM 元 素 本 身 和 所 有 的 子 元 素 。 例 如 : 


<p>Hello</p>World<p>jQuery</p> 


执行 $8("p")remove0 语 句 ， 得 到 的 结果 是 world。 

empty0 方 法 只 是 从 DOM 元 素 中 删除 子 元 素 ， 同 样 是 上 面 的 html 代码 ， 如 果 执 行 
$("p ").empty0 语 句 ， 得 到 的 结 果 是 <p></p>World<p></p> 6 

detach0 方 法 与 remove0 方 法 基本 相同 ， 也 是 从 DOM 中 删除 所 有 匹配 的 元 素 ， 但 与 
remove0 方 法 不 同 的 是 ， 被 删除 元 素 的 所 有 绑 定 的 事件 、 附 加 的 数据 等 都 会 保留 下 来 。 因 此 ， 
如 果 以 后 要 将 移 除 的 元 素 重新 插入 到 DOM 中 ，detach0 方 法 将 非常 有 用 。 

上 述 3 个 方法 的 区 别 如 表 6-10 所 示 。 
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表 6-10 删除 元 素 的 方法 的 区 别 

























方 法 | 元 素 本 身 (包含 所 有 属性 ) | ， 绑 定 事件 和 附加 的 相关 数据 文本 域 及 子 节点 
empty0 | 不 出 除 不 删除 | 出 除 
temove0 | 删除 删除 | 出 除 
detach0 删除 不 删除 





6.4.4 ”元 素 的 包 应 

所 谓 元 素 包 庄 是 指 用 另外 一 个 指定 的 标记 将 匹配 的 元 素 包 衷 起 来 ， 并 返回 一 个 jQuery 
对 象 。 

1. wrap() 方 法 

wrap() 方 法 的 语法 是 : 

$ (selector) .wrap( element | function) 

它 的 参数 可 以 是 一 个 选择 器 、DOM 元 素 、html 代码 、jQuery 对 象 、 函 数 。 例 如 : 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>wrap demo</title> 
<style> 
div { 
border: 2px solid blue; 
} 
pi 
background: yellow; 
margin: 4px; 
} 
</style> 
<script src="https://code.jQuery.com/jQuery-1.10.2.js"></script> 
</head> 
<body> 
<p>Hello</p> 
<p>jQuery</p> 
<p>World</p> 
<script> 
$( "p" ) .wrap( "<div></div>" ); 
</script> 
</body> 
</html> 


上 面 的 代码 对 每 一 个 p 元 素 用 div 元 素 包 庄 起 来 。 显 示 效 果 如 图 6-7 所 示 。 
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图 6-7 wrap0 方 法 的 显示 效果 


如 果 参 数 是 一 个 回调 函数 ， 它 将 生成 一 个 用 来 包 庄 匹配 元 素 的 HTML 结构。 例如: 


<div class="container"> 
<div class="inner">Hello</div> 


<div class="inner">Goodbye</div> 


</div> 
<script> 
$( ".inner" ) .wrap (function() { 
return "<div class='" + $( this ) .text() + "'></div>"; 
]) 7 
</script> 


会 得 到 如 下 的 HTML 结构 : 


<div class="container"> 
<div class="Hello"> 
<div class="inner">Hello</div> 
</div> 
<div class="Goodbye"> 
<div class="inner">Goodbye</div> 
</div> 
</div> 


与 wrap0 方 法 作用 相反 的 方法 是 unwrap0， 它 从 DOM 中 删除 匹配 元 素 中 每 个 元 素 的 父 
元 素 (直接 上 级 元 素 )。 例 如 : 


<div> 
<p>Hello</p> 
</div> 

<div> 
<p>jQuery</p> 
</div> 

<div> 
<p>World</p> 
</div> 
<script> 

$( "p" ) .unwrap(); 
</script> 


将 会 得 到 下 面 的 HIML 结构 : 


<p>Hello</p> 
<p>jQuery</p> 
<p>World</p> 
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2. wraplnner() 方 法 








此 方法 使 用 一 个 HTML 结构 来 包装 匹配 集合 中 每 个 元 素 的 内 容 ( 包 括 文本 节点 在 内 )， 并 
返回 一 个 jQuery 对 象 。 例 如 ， 对 如 下 的 HIML 代码 ; 

<div id ="div1"> 

<p>Hello</p> 

<p>World</p> 








</div> 


执行 如 下 jQuery 语句 : 


$("#divl p") .wrapInner ("<b class = "bold' />"); 


得 到 的 结果 是 : 

<div id ="div1"> 

<p><b class = 'bold' >Hello</b></p> 
<p><b class = 'bold' >World</b></p> 
</div> 


3. WrapAll 方 法 
此 方法 使 用 一 个 HTML 结构 元 素 包 陵 在 所 有 匹配 元 素 的 周围 , 并 返回 jQuery 对 象 。 例 如: 


<div id ="div1"> 


<p>Hello</p> 
<p>World</p> 

</div> 

执行 如 下 的 jQuery 语句 : 


$("#divl p") .wrapAll ("<div class = 'inner'/>"); 


得 到 的 结果 是 : 


<div id ="divl"> 
<div class = 'inner'> 
<p>Hello</p> 
<p>World</p> 

</div> 

</div> 


6.4.5 ”元素 的 替换 和 复制 


jQuery 提供 了 蔡 换 和 复制 DOM 元 素 的 方法 ， 也 就 是 将 原来 的 元 素 删除 后 再 插入 一 个 新 
元 素 。 
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1. replaceWith() 方 法 


<html> 
<head> 
<meta charset="utf-8"> 
<script src="https://code.jQuery.com/jQuery-2.1.1.j]s"></script> 
<script type="text/javascript"> 
$ (document) .ready (function(){ 
S$(" .btn1") .click (function(){ 
$("p") .replaceWith ("<b>Hello world!</b>"); 
]) 7 
]) 7 
</script> 
</head> 
<body> 
<p>This is a paragraph.</p> 
<p>This is another paragraph.</p> 
<button class="btn1"> 用 粗 体 文本 替换 所 有 段落 </button> 
</body> 
</html> 


点 击 按钮 后 的 效果 是 使 用 粗 体 的 “Hello world!” 替 换 了 原来 的 p 元 素 。 
2. replaceAll() 方 法 
此 方法 使 用 匹配 元 素 集合 来 蔡 换 每 个 目标 对 象 ， 并 返回 jQuery 对 象 。 它 的 参数 可 以 是 
DOM 元 素 、jQuery 对 象 、 选 择 器 、 数 组 。 例 如 : 
S$("<div>") .replaceAll ("p"); 
会 将 所 有 p 元 素 及 其 内 容 替换 为 div 元 素 
3. clone() 方 法 


使 用 clone0 方 法 可 执行 复制 元 素 的 操作 ， 以 创建 匹配 元 素 集合 的 副本 。 由 于 复制 元 素 后 
需要 将 新 元 素 再 插入 文档 中 ， 因 此 clone0 方 法 通常 和 某 种 插入 方法 结合 使 用 。 它 的 语法 为 : 


$ (selector) .clone( [withDataAndEvents ] [, deepWithDataAndEvents ] ) 


withDataAndEvents 是 布尔 值 ， 表 示 同 时 拷贝 元 素 的 数据 和 绑 定 的 事件 。 默 认为 false。 

deepWithDataAndEvents 是 布尔 值 ， 表 示 同 时 拷贝 元 素 及 其 子 元 素 的 数据 和 绑 定 的 事件 ， 
默认 为 false。 

例如 : 


<div class="container"> 
<div class="hello">Hello</div> 
<div class="goodbye">Goodbye</div> 
</div> 
<script> 
$( ".hello" ) .clone () .appendTo( ".goodbye™" ); 
</script> 
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执行 后 ， 会 得 到 如 下 HTML 代码 : 


<div class="container"> 
<div class="hello">Hello</div> 
<div class="goodbye"> 
Goodbye 
<div class="hello">Hello</div> 
</div> 
</div> 


6.4.6 ”遍历 和 筛选 DOM 元 素 


1. ,is() 

根据 选择 器 检查 当前 匹配 元 素 集合 ， 如 果 存 在 至 少 一 个 匹配 元 素 ， 则 返回 tue， 它 对 结 
果 集 求 值 但 并 不 改动 结果 集 。 一 般 用 在 回调 函数 (callback) 中 。 例 如 : 

SU) A" Foo) 

这 行 代码 表示 先 选 出 所 有 的 段落 ， 再 检查 是 否 有 一 个 段落 拥有 class foo。 

2. find() 

用 来 在 当前 结果 集中 查找 符合 条 件 的 后 代 元 素 ， 它 的 查找 范围 不 限制 是 子 元 素 还 是 多 少 
代 孙 元 素 。 例 如 : 


<body> 
<p><span>Hello</span>, how are you?</p> 





<p>Me? I'm <span>good</span>.</p> 
<span>jQuery</span> 
<script> 

$ ("body") .find("span") .css('color', 'red'); 
</script> 
</body> 


上 面 的 代码 表示 搜索 所 有 body 中 的 后 代 span 元 素 ， 并 将 其 颜色 设置 为 红色 ， 显 示 结果 
为 Hello、good、jQuery 成 为 红色 字体 。 

3. .not() 

从 匹配 元 素 集合 中 删除 元 素 ， 唯 一 的 参数 可 以 是 选择 器 或 者 DOM 元 素 。 例 如 : 

$("p") .not ("#selected") 

从 包含 所 有 段落 的 集合 中 删除 id 为 "selected" 的 段落 。 

4. .addSelf() 

它 可 以 让 我 们 在 使 用 一 个 遍历 方法 查找 目标 元 素 时 ， 保 留 原始 结果 集 。 例 如 : 


S("p") .find("span"); 
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只 包含 查找 到 的 span 子 元 素 ， 如 果 想 把 原始 结果 集 (p 元 素 集合 ) 合 并 到 查找 结果 当中 ， 
就 应 该 使 用 下 面 的 代码 : 


S$("p") .find("span") .andSelf (); 

















5. .children() 


获得 匹配 元 素 集 合 中 每 个 元 素 的 所 有 子 元 素 。 


例如 : 

$("p") .children(".foo"); 

这 行 代码 表示 获取 所 有 段落 中 拥有 class foo 的 子 元 素 。 
6. .parent() 

获得 当前 匹配 元 素 集合 中 每 个 元 素 的 直接 父 元 素 。 例 如 : 
$ ("span ") .parent (); 

上 面 的 代码 表示 选 出 页 面 span 元 素 的 直接 父 元素 。 

7. .closest() 


.closest0 方 法 允许 我 们 检索 DOM 树 中 的 这 些 元 素 以 及 它们 的 祖先 元 素 ， 并 用 匹配 元 素 
构造 新 的 jQuery 对 象 。 
与 .parents0 的 区 别 如 表 6-11 所 示 。 


表 6-11 .closest() 与 .parents() 方 法 的 区 别 


.Closest() .parents() 
从 当前 元 素 开始 从 父 元 素 开 始 


沿 DOM 树 向 上 遍历 , 直到 文档 的 根 元 素 为 止 , 将 每 个 祖先 
元 素 添加 到 一 个 临时 的 集合 ， 如 果 应 用 了 选择 器 ， 则 会 基 
于 该 选择 器 对 这 个 集合 进行 筛选 

返回 包含 零 个 、 一 个 或 多 个 元 素 的 jQuery 对 象 


沿 DOM 树 向 上 遍历 , 直到 找到 已 应 用 选 
择 器 的 第 一 个 匹配 为 止 





返回 包含 零 个 或 一 个 元 素 的 jQuery 对 象 
8. .parents() 


与 parent0 不 同 , .parents0 会 返回 所 有 的 祖先 元 素 , 它 接受 一 个 可 选 的 参数 来 过 滤 结果 集 。 
例如 : 


$ ("span ") .parents (); 


上 面 的 代码 表示 选 出 页 面 span 元 素 的 全 部 祖先 元 素 。 
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9. .next() 和 .nextAll() 

next(0 方 法 将 找 出 原始 结果 集中 每 一 个 元 素 的 下 一 个 兄弟 元 素 。 而 -nextAl10 方 法 将 找 出 
原始 结果 集中 每 一 个 元 素 之 后 的 所 有 兄弟 元 素 。 

10. .prev() 和 .prevAll() 

prev0、JprevAl(0 方 法 与 next0、nextAl(0 方 法 只 有 一 点 不 同 ， 那 就 是 它们 是 向 前 而 不 是 
向 后 查找 兄弟 元 素 。 

11. .siblings() 

获得 匹配 元 素 集合 中 所 有 元 素 的 同辈 元 素 ， 由 选择 器 筛选 (可 选 )。 它 会 选择 全 部 兄弟 元 
素 (不 分 前 后 的 同辈 元 素 )。 


6.5_ jQuery 对 DOM 属性 操作 


jQuery 能 够 通过 指定 DOM 元 素 的 属性 给 网 页 带 来 活力 , 比如 指定 sre、 class、 title、 width 
等 属性 。 这 在 客户 端 脚本 编程 中 十 分 重要 。 


6.5.1 获取 和 设置 元 素 属性 


jQuery 使 用 atr0 方 法 读 取 和 设置 元 素 的 属性 ， 当 为 该 方法 传递 一 个 参数 时 ， 即 为 获取 某 
元 素 的 指定 属性 ， 当 为 该 方法 传递 两 个 参数 时 ， 即 为 设置 元 素 指定 属性 的 值 。 例 如 ;: 

// 读 取 

Var src = $("img") .attr("src"); 

// 设 置 

//$ ("img") .attr ("src", "logo.jpg"); 

设置 属性 时 第 二 个 参数 可 以 是 函数 ， 当 新 设置 的 属性 值 依赖 于 属性 原来 的 值 或 其 他 值 
时 ， 就 要 使 用 到 函数 的 强大 之 处 。 例 如 : 

$("p").attr('title',function (index,previousValue) { 

return previousValue + ' 我 的 编号 '+index; 

六 

在 上 面 的 代码 中 ，index 参数 是 元 素 在 集合 中 从 零 开 始 的 下 标 ，previousValue 是 元 素 属 
性 的 当前 值 。 上 面 的 代码 会 作用 于 所 有 的 p 元 素 , 并 为 每 个 p 元 素 的 title 属性 指定 不 同 的 值 。 

如 果 需 要 一 次 设置 多 个 属性 的 值 ， 传 入 一 个 包含 属性 键 值 对 的 对 象 即 可 ， 例 如 : 


$('input') -attr(fvalue:' vtitle: "请 输入 '}) 7 








removeAttr() 方法 从 被 选 元 素 中 移 除 属性 。 例 如 : 


$ ("img") - removeAttr ("src") 


第 6 章 jQuery *167* 








此 外 , val0 方 法 也 可 以 返回 或 设置 元 素 的 value 属性 值 , 该 方法 大 多 用 于 input 元素。 例如: 
// 读 取 


S{("email™") .al()> 
// 设 置 


$(":email") .val ("example@163.com"); 


6.5.2 ”获取 和 设置 元 素 内 容 


jQuery 可 以 动态 地 获取 和 设置 元 素 的 内 容 , 并 提供 html0 方 法 来 获取 和 设置 元 素 的 HIML 
内 容 ， 提 供 text0 方 法 来 获取 和 设置 元 素 的 文本 内 容 。 
1. html() 方 法 


不 提供 参数 时 会 获取 匹配 元 素 的 集合 中 第 一 个 元 素 的 HIML 内 容 并 返回 字符 串 。 如 果 提 
供 了 字符 串 参数 ， 则 根据 参数 来 设置 集合 中 每 个 元 素 的 HTML 内 容 并 返回 jQuery 对 象 。 例 如 : 


<body> 

<div> 

</div> 

<div> 

</div> 

<script> 

$ ("div") .html ("<p>Nice to meet you</p>"); 
alert ($ ("div") .html ()); 

// 输 出 <p>Nice to meet you</p> 
</script> 

</body> 





上 面 的 代码 的 运行 效果 如 图 6-8 所 示 。 





Nice to meet you 
Nice to meet you 


图 6-8 html0 方 法 的 运行 效果 


2. text() 方 法 


不 提供 参数 时 会 获取 匹配 元 素 集合 中 所 有 元 素 的 文本 内 容 ， 而 不 像 html0 方 法 只 获取 第 
一 个 元 素 的 HIML 内 容 。 如 果 提 供 了 字符 串 参 数 ， 则 会 根据 参数 来 设置 集合 中 每 个 元 素 的 文 
本 内 容 ， 并 返回 jQuery 对 象 。 例 如 : 

<body> 

<div> 

</div> 

<div> 

</div> 














<script> 
$ ("div") .text ("<p>Nice to meet you</p>"); 
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alert ($ ("div") .text ()); 

// 输 出 <p>Nice to meet you</p> <p>Nice to meet you</p> 
</script> 

</body> 


上 面 的 代码 的 运行 效果 如 图 6-9 所 示 。 


pONice to meet you</p> 
<p>Nice to meet youl/p> 


图 6-9 ”text0 方 法 的 运行 效果 
6.5.3 ”获取 和 设置 元 素 的 CSS 属性 


1. css() 方 法 


jQuery 提供 了 css0 方 法 来 获取 和 设置 元 素 的 CSS 样式 属性 ， 其 方法 类 似 于 attr0 方 法 。 
可 以 通过 指定 名 称 和 值 来 设置 单个 的 CSS 样式 ， 也 可 以 通过 传 入 一 个 对 象 来 设置 一 系列 的 
CSS 样式 。 例 如 : 


<body> 
<h1> 前 端 开发 </h1> 
<p>jQuery</p> 
<script> 
$("h1") .css ("border","10px solid") 
S$("p") eastl 
"textDecoration":"underline", 
"background-color":"#b7b7ff" 
]) 7 
</script> 
</body> 


上 面 的 代码 的 运行 效果 如 图 6-10 所 示 。 








图 6-10 css0 方 法 的 运行 效果 





需要 注意 的 是 ,CSS 属性 应 该 写 为 JavaScript 中 的 形式 , 如 text-decoration 写成 textDecoration。 
2. addClass() 和 removeClass() 方 法 


为 了 将 样式 信息 保留 在 CSS 文件 中 ,jQuery 提供 了 添加 和 移 除 CSS 类 的 函数 addClass0 
向 一 个 或 一 组 元 素 中 添加 一 个 或 多 个 类 ，removeClass0 方 法 从 一 个 或 一 组 元 素 中 移 除 一 个 或 
多 个 类 。 这 两 个 方法 接受 一 个 字符 串 参 数 ， 表 示 即 将 作用 于 目标 元 素 的 类 ， 如 果 是 由 空格 分 
隔 的 字符 串 ， 则 表示 应 用 多 个 类 。 返 回 的 值 是 更 改 样式 后 的 元 素 集合 。 例 如 : 
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<script> 

$ (document) .ready (function(){ 
$ ("button") .click (function(){ 

$("p:first") -addClass ("intro"); 

1); 

}); 

</script> 

<style type="text/css"> 

-intro 

t 

font-size:220%; 

background-color:red; 

} 

</style> 

</head> 


<body> 

<hl>This is a heading</h1> 

<p>This is a paragraph.</p> 

<p>This is another paragraph.</p> 
<button> 向 第 一 个 p 元 素 添加 一 个 类 </button> 
</body> 


这 段 代 码 展示 了 addClass0 方 法 的 实际 作用 ， 当 点 击 按钮 后 ， 第 一 个 p 标签 的 字体 大 小 
和 颜色 发 生变 化 。 


3. hasClass() 和 toggleClass() 方 法 


判断 元 素 是 否 包含 特 定 的 类 是 很 常见 的 需求 。 有 时 需要 根据 元 素 是 否 包含 特定 的 类 来 进 
行 条 件 判断 。 这 时 就 可 以 使 用 hasClass0 方 法 来 实现 ， 它 的 语法 为 : 


hasClass (name) 


name 表示 要 检查 的 类 名 , 为 字符 串 格式 。 如 果 集 合 中 包含 传 入 参数 的 类 名 , 则 返回 true， 
否则 返回 false。 

还 有 一 种 普遍 的 操作 是 根据 元 素 的 类 在 两 个 状态 之 间 变 化 , 也 就 是 进行 类 的 切换 ,jQuery 
提供 了 toggleClass0 方 法 简化 操作 ， 它 的 语法 为 : 


toggleClass (name) 


name 表示 要 切换 的 单个 类 名 ， 或 者 以 空格 分 隔 的 字符 串 表 示 多 个 类 名 。 如 果 元 素 不 存 
在 指定 类 名 ， 则 为 其 添加 类 名 ， 如 果 元 素 已 经 拥有 这 个 类 名 ， 则 从 中 删除 此 类 名 。 返 回 的 是 
元 素 集合 。 例 如 : 


<table> 
Er 
<th>ID</th> 
<th>Fruit</th> 
<th>Price</th> 
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二 > 
Er 
<td>1</td> 
<td>Apple</td> 
<td>0.60</td> 
</tr> 
<tr> 
<td>2</td> 
<td>Orange</td> 
<td>0.50</td> 
站 
<tr> 
<td>3</td> 
<td>Banana</td> 
<td>0.10</td> 
</tr> 
</table> 
<script type="text/javascript"> 
$ (function() { 
$ ("table tr:nth-child(even)") .addClass ("striped"); 
function swap() { 
$( this ) .toggleClass('striped'); 
} 
$ ("tr") .mouseover (swap) .mouseout (swap); 
}); 
</script> 


在 价格 表 中 ， 我 们 希望 表格 中 的 行 交 替 设 置 不 同 的 颜色 ， 当 鼠标 移入 移出 的 时 候 ， 将 奇 
数 行 的 彩色 背景 与 偶数 行 的 背景 进行 互 换 。 在 JavaScript 代码 中 ， 我 们 使 用 了 学 习 过 的 
nth-child 选择 器 ， 为 表格 中 的 隔行 元 素 应 用 类 striped， 定 义 了 为 所 有 tr 元 素 切 换 背 景 颜色 的 
函数 swap。 最 后 是 重点 ， 使 用 mouseover 和 mouseout 事件 处 理 函 数 ， 分 别 调用 toggleClass() 
方法 。 得 到 的 结果 是 每 当 鼠 标 进入 或 者 移出 行 时 ， 就 会 在 当前 行 应 用 stripped 类 或 者 删除 
stripped 类 。 


6.6 jQuery 响应 事件 


我 们 已 经 学 习 过 ready0 事 件 处 理 函 数 , 事件 在 触发 后 被 分 为 两 个 阶段 , 一 个 是 捕获 阶段 ， 
另 一 个 是 冒 泡 阶段 。jQuery 定义 了 兼容 性 更 好 的 事件 名 称 ， 更 加 简洁 的 事件 处 理 方式 。 包 括 
鼠标 事件 、 表 单 事件 、 浏 览 器 事件 和 文档 事件 等 。jQuery 的 事件 名 与 标准 DOM 中 的 事件 名 
很 相似 。 

表 6-12 给 出 了 jQuery 中 的 鼠标 键盘 事件 。 
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表 6-12 jQuery 中 的 鼠标 键盘 事件 
事件 名 说 ”了 明 





























click 当 鼠 标 指针 位 于 一 个 元 素 上 时 ， 如 果 单 击 鼠 标 按钮 ， 则 会 触发 该 元 素 的 click 事件 
dbclick 当 双 击 一 个 元 素 时 ， 就 会 向 该 元 素 发 送 dbclick 事件 
hover' 当 鼠 标 移 入 到 一 个 元 素 上 面 及 移出 这 个 元 素 时 触发 
mousedown 按 下 鼠标 按键 时 触发 

mouseup 释放 鼠标 按键 时 触发 

Imousemove 当 鼠 标 在 某 个 元 素 内 移动 时 触发 

mouseenter 当 鼠 标 进 入 某 个 元 素 时 触发 

mouseleave 当 鼠 标 离开 某 个 元 素 时 触发 

mouseover 当 鼠 标 指针 进入 某 个 元 素 时 触发 

mouseout 当 鼠 标 指针 离开 某 个 元 素 时 触发 

keydown 在 键盘 按 下 时 触发 

keyup 在 按键 释放 时 触发 

keypress 在 敲 击 按键 时 触发 


用 jQuery 处 理事 件 的 语法 是 : 


$ (document) .ready (function() { 
$("#btn") .click (function(){ 
alert ("jQuery"); 
D); 
} 


jQuery 提供 的 mouseenter 和 mouseleave 事件 与 mouseover 和 mouseout 事件 比较 相似 ， 
但 mouseenter 和 mouseleave 事件 不 存在 冒 泡 现象 。 由 于 mouseover 和 mouseout 事件 存在 冒 
泡 现象 ， 当 一 个 元 素 内 还 有 子 元 素 时 ， 鼠 标 进入 该 元 素 的 子 元 素 的 边界 之 内 时 又 会 触发 
mouseover 事件 ， 并 将 事件 冒 泡 传递 给 外 层 的 该 元 素 。 

hover0 方 法 实际 上 等 价 于 mouseenter 与 mouseleave 事件 的 组 合 。 例 如 : 


<ul> 
<1i>Milk</1i> 
<1i>Bread</1i> 
</ul> 
<script> 
$( "li" ) .hover( 
function() { 
$( this ) .append( $( "<span> ***</span>™" ) ); 
}, function() { 
$( this ) .find( "span™" ) .remove(); 
} 
); 
<jacript> 
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表 6-13 给 出 了 jQuery 中 的 表单 事件 。 
表 6-13 ”jQuery 中 的 表单 事件 




















事件 名 说 明 
blur 当 一 个 元 素 失 去 焦点 时 触发 
focus, 当 一 个 元 素 获 得 焦点 时 触发 
change 当 文 本 框 、 文 本 区 域 和 选择 框 的 值 发 生变 化 时 触发 
focusin 当 元 素 或 子 元 素 获得 焦点 时 触发 
focusout 当 元 素 或 子 元 素 失去 焦点 时 触发 
select 当 textarea 或 文本 类 型 的 input 元 素 中 的 文本 被 选择 时 会 发 生 select 事件 
submit 用 户 提交 表单 时 触发 





focusout 和 blur 的 区 别 是 focusout 事件 存在 冒 泡 现象 ，focusin 和 focus 的 区 别 也 是 如 此 。 
当 一 个 元 素 内 还 有 子 元 素 时 ， 子 元 素 失去 焦点 也 会 触发 父 元 素 上 的 focusout 事件 。 例 如 : 





<div class="inputs"> 
<p> 
<input type="text"><br> 
<input type="text"> 
</p> 
<p> 
<input type="password"> 
</p> 
</div> 
<div id="focus-count">focusout fire</div> 
<div id="blur-count">blur fire</div> 


<script> 
Var focus = 0, 
blur = 0; 
4 "BB™ 3 
.focusout (function() { 
focust++; 
$( "#focus-count" ) .text( "focusout fired: " + focus + "x" ); 
} 
.blur (function() { 
blurt+t+; 
$( "#blur-count" ).text( "blur fired: " + blur + "x" ); 
}); 
</script> 








运行 上 面 的 代码 时 , p 元 素 内 的 input 元 素 失去 
函数 而 不 会 触发 blur 处 理 函 数 。 

下 面 我 们 来 实现 点 击 缩 略 图 时 显示 大 图 特效 ， 需 要 实现 的 功能 包括 : 点 击 缩 略 图 后 ， 
出 现 loading( 正 在 加 载 ) 的 小 图 标 ， 然 后 加 载 大 图 ， 当 大 图 加 载 完成 后 隐藏 loading 的 小 图 标 并 


时 , 会 触发 p 元 素 上 的 focusout 处 理 
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显示 大 图 ; @ 点 击 大 图 后 ， 隐 藏 大 图 并 显示 缩 略 图 。 代 码 实现 如 下 : 
HIMLS 代码 为 : 
<div class="cont down41"> 


<!-- 用 户头 像 --> 


<div clas 





cont down4 a"><img class="picturel" /></div> 
<div class="cont down4 b"> 
<!-- 用 户 昵称 --> 
<div class="fo" ></div> 
<!-- 微 博 内 容 --> 
<div data-content="content"></div> 
<!-- 缩 略图 div--> 
<div class="photoBox"> 
<div class="loadingBox"> <span class="loading"></span> </div> 
<img src="images/imgtest small.jpg" class="zoom" onclick= 
"zoom image ($ (this) .parent ());"/> </div> 
<!-- 大 图 div--> 
<div class="photoArea" style="display:none;"> <img src="" class= 
"minifier" onclick="zoom image($ (this) .parent ());" /> </div> 
<div> 
<!-- 微 博 发 布 时 间 称 --> 
<time data-content="timestamp" data-format="DateTimeFormatter"> </time> 
</div> 
</div> 
</div> 


样式 代码 为 : 


.PhotoBox{width:100px;height:100px;background:#fff;padding:2px;border:1px 
solid#E5E5E5;display:inline-block;margin:10px 20px00;position:relative; 
.PhotoBox img{width:100px; height:100px;} 
.loadingBox{background:#fff;*filter:alpha (opacity=30) ;text-align:center; 
margin:-8px 0 0 -8px;display:none;} 
.loading{background:url(../images/loading 16.gif) no-repeat 0 0; 
width:16px;height:16px;display:inline-block;} 
.PhotoArea{width:400px; height:400px;background:#F7F7F7; 
border:1lpx solid #EBEBEB;padding:10px;text-align:center;zoom:1;} 


jQuery 代码 为 : 


<script> 
function zoom image(obj) { 
if (obj.hasClass('photoBox')) { 
Var load = obj.find('.loadingBox'); 
load.show(); 
Var img = obj.next().find('img'); 
if (img.attr('src') === "'') { 
img.attr('sre’; obifind("inmg')attr('sre') .replace(" smlla; .")). 
img.load(function() { 
obj.hide(); 
obj.next () .show(); 
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]) 
} else { 
obj .hide(); 
obj.next () .show(); 
} 
} else { 
obj .hide(); 
obj .prev() .show(); 
obj.prev() .find('.loadingBox') .hide(); 


} 
</script> 


表 6-14 给 出 了 jQuery 中 的 浏览 器 事件 。 


表 6-14 jQuery 中 的 浏览 器 事件 





事件 名 说 了 明 
‘errorO 未 正确 加 载 文档 中 某 个 元 素 时 触发 
-esize0) 当 对 象 的 大 小 将 要 发 生变 化 时 触发 
.scroll0 要 滚动 元 素 时 触发 


表 6-15 给 出 了 jQuery 中 的 文档 事件 。 


表 6-15 jQuery 中 的 文档 事件 


事件 名 说 明 
load0 当 指 定 的 元 素 ( 及 子 元 素 ) 已 加 载 时 ， 会 发 生 load0 事 件 。 该 事件 适用 于 任 
何 带 有 URL 的 元 素 (比如 图 像 、 脚 本 ) 
-TeadyO 当 DOM 树 加 载 完毕 后 触发 
unload 





离开 页 面 时 触发 (浏览 器 窗口 已 被 关闭 、 使 用 前 进 或 后 退 按钮 ) 


6.6.1 绑 定 事件 


将 事件 处 理 函 数 绑 定 到 元 素 的 事件 上 的 方法 是 on0 方 法 ， 语 法 如 下 : 
$ (selector) .on (event, childSelector, data, function) 


event: 表示 由 空格 分 隔 多 个 事件 名 称 。 必 须 是 有 效 的 事件 。 
childSelector: 可 选 ， 表 示 只 能 添加 到 指定 的 子 元 素 上 的 事件 处 理 程序 。 
data: 可 选 。 规 定 传递 到 函数 的 额外 数据 。 

function: 规定 当 事 件 发 生 时 运行 的 函数 。 

例如 : 





function greet( event ) { 


alert( "Hello " + event.data.name ); 
} 
ss “button™” J-0n{ "click”, { 
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name: "Karl™ 
}, greet ); 


在 人 人 微 博 网 站 中 ， 如 果 发 布 的 微 博 中 有 指向 网 站 外 部 的 链接 ， 我 们 希望 在 新 的 浏览 
窗口 打开 。 这 里 约定 只 有 外 部 的 链接 才 使 用 http 开头 。 实 现代 码 如 下 : 





$( "#someDiv" ) .on( "click", "a", function( event ) { 


var elem = $( this ); 
if ( elem.is( "[href^="'http']" ) ) { 
elem.attr( "target", " blank™" ); 
} 
3 


one() 方 法 为 每 一 个 匹配 元 素 绑 定 一 个 一 次 性 的 事件 处 理 函 数 。 也 就 是 事件 处 理 函数 只 会 
被 执行 一 次 。 例 如 : 
$( "p" ).one( "click", function() { 


alert( $( this ) .text() ); 
1D); 


自 jQuery 1.7 以 来 ，on0 函 数 的 功能 得 到 增强 ， 在 此 之 前 绑 定 事件 的 bind0、delegate0 
和 live0 已 经 不 推荐 使 用 ， 对 事件 的 绑 定 最 好 使 用 on0 函 数 。 


6.6.2 ” 移 除 事件 
off0 方 法 通常 用 于 移 除 通过 on0 方法 添加 的 事件 处 理 程序 。 它 的 语法 为 : 
.off( events [，selector ] [, handler ] ) 


例如 : 


$ ("button") .click (function(){ 
So) orEt "elick")ys 
1); 


6.6.3 ”Event 实例 
jQuery 的 Event 实例 还 拥有 额外 的 两 个 方法 ， 如 表 6-16 所 示 。 


表 6-16 ”Event 方 法 





方 法 说 了 明 
取消 执行 其 他 的 事件 处 理 函数 并 取消 事件 冒 泡 。 如 果 同 一 个 事件 绑 定 了 
stopImmediatePropagation0 多 个 事件 处 理 函 数 ， 则 在 其 中 一 个 事件 处 理 函数 中 调用 此 方法 后 将 不 会 


继续 调用 其 他 的 事件 处 理 函 数 


isImmediatePropagationStopped( | 是 否 调用 过 stopImmediatePropagation0 方 法 
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6.6.4 触发 事件 


jQuery 提供 了 trigger 方法 来 触发 事件 , 即使 用 户 不 操作 界面 也 能 够 触发 各 种 事件 。 比如， 
如 果 用 trigger0 触 发 一 个 submit 事件 ， 则 同样 会 导致 浏览 器 提交 表单 。 所 有 触发 的 事件 现在 
会 冒 泡 到 DOM 树 上 。 我 们 可 以 用 stopPropagation0 来 阻止 事件 冒 泡 ， 或 者 在 事件 处 理 函 数 
中 返回 false 即 可 。 语 法 为 ; 








.trigger( eventType [, extraParameters ] ) 


eventType 参数 表示 事件 类 型 ， 可 以 是 有 效 的 字符 串 或 者 jQuery Event 对 象 。 
extraParameters 参数 表示 传递 到 事件 处 理 程序 的 额外 参数 。 
例如 : 
$( "#fo0" ).on( "click", function(event, a, b) { 
alert( $( this ) .text() ); 


]) 7 
$l fog0™ hatrigooet "click™ "fou", “bas™ 1 js 


Var event = jQuery.Event( "submit" ); 

$( "form:first" ).trigger( event ); 

if ( event.isDefaultPrevented() ) { 
// Perform an action... 


} 


6.6.5 自 定义 事件 


所 谓 自 定义 事件 , 就 是 有 别 于 带 有 浏览 器 特定 行为 的 事件 (类 似 click、mouseover、 submit、 
keydown 等 事件 )。 例 如 : 
$("p").on("myEvent", function (event, messagel, message2) { 
alert (messagel + ' ' + message2); 


]) 7 
S$("p") .trigger ("myEvent"， ["Hello","World!"]); 


jQuery 的 自 定 义 事件 还 有 命名 空间 机 制 ，jQuery 的 事件 命名 空间 机 制 提供 了 在 同一 个 事 
件 下 对 处 理 函数 再 分 类 的 功能 。 例 如 : 

















$ (document) .on ("click.cl",function() {console.1og("cl")7})7 
$ (document) .on ("click.c2",function() {console.1o0g("c2");}); 


如 果 想 移 除 click.cl 事件 处 理 函数 ， 保 留 click.c2 处 理 函数 ， 使 用 $(document).off("click") 
是 行 不 通 的 ， 因 为 $8(document).off("click") 会 移 除 click.cl 和 click.c2 处 理 函 数 。 这 时 候 就 可 以 
使 用 命名 空间 ， 使 用 $(document).offl"click.c1") 只 会 移 除 click.cl 处 理 函 数 。 
那 我 们 为 什么 使 用 自 定 义 事件 呢 ? 例如 厨房 中 有 一 个 灯泡 和 两 个 开关 ， 两 个 开关 都 可 以 
控制 灯泡 的 状态 。 卧 室 中 也 有 一 个 灯泡 和 两 个 开关 ， 此 外 还 有 一 个 总 开关 ， 如 果 有 任何 灯泡 
处 于 开启 状态 ， 切 换 总 开关 会 关闭 所 有 灯泡 ， 和 否则 切换 总 开关 会 打开 所 有 灯泡 。 如 果 不 使 用 











Cn 
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定义 事件 和 命名 空间 ， 实 现代 码 如 下 所 示 : 


<div class="room" id="kitchen"> 
<div class="1ightbulb on"> 灯 泡 </div> 
<div class="switch"> 开 关 </div> 
<div class="switch"> 开 关 </div> 
</div> 





<div class="room" id="bedroom"> 
<div class="lightbulb on"> 灯 泡 </div> 
<div class="switch"> 开 关 </div> 
<div class="switch"> 开 关 </div> 
</div> 
<div id="master_ switch"> 总 开关 </div> 
</div> 
<script type="text/javascript"> 
St aiteoh" clicr(functiont} 六 
var light = $( this ) .closest( ".room" ).find( ".lightbulb" ); 
i£ ( 1ight.is( “on™ ) ) { 
light.removeClass( "on" ).addClass( "off"™ ); 
} else { 
light.removeClass( "off" ).addClass( "on™ ); 
} 
]) 7 
$( "#master_switch"”) .click(function() { 
var lightbulbs = $( ".lightbulb" ); 
// 检 查 是 否 有 任何 灯泡 处 于 开启 状态 
if ( lightbulbs.is( ".on" ) ) { 
lightbulbs.removeClass( "on" ).addClass( "off" ); 
} else { 
lightbulbs.removeClass( "off" ) .addClass( "on" ); 
} 
]) 7 
</script> 


如 果 我 们 使 用 自 定义 事件 ， 并 分 析 后 添加 lighton( 开 灯 )、light:off 关 灯 )、lighttoggle( 切 
换 灯泡 状态 ) 三 种 自 定义 事件 ， 则 实现 代码 如 下 : 


<script type="text/javascript"> 
// 在 灯泡 上 绑 定 三 种 事件 
$( ".lightbulb" ) .on( "light:toggle", function( event ) { 
var light = $( this ); 
EF A Lightaist on™ 3 小 
light.trigger( "light:off"™" ); 
} else { 
light.trigger( "light:on™" ); 
} 
}) .on( "light:on", function( event ) { 
$( this ) .removeClass( "off" ).addClass( "on™ ); 
}) .on( "light:off", function( event ) { 
$( this ) .removeClass( "on" ) .addClass( "off"™ ); 
和 
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// 开 关 点 击 事件 
$( ".-switch" ) .click(function() { 
Var room = $( this ) .closest( ".room™ ); 
room.find( ".lightbulb" ).trigger( "light:toggle" ); 
}); 
$( "#master switch" ).click(function() { 
var lightbulbs = $( ".lightbulb"™" ); 
// 检查 是 否 有 任何 灯泡 处 于 开启 状态 
if ( lightbulbs.is( ".on™" ) ) { 
lightbulbs.trigger( "light:off" ); 
} else { 
lightbulbs.trigger( "light:on" ); 
} 
1D); 
</script> 


这 段 代码 看 起 来 复杂 了 ， 但 是 代码 结构 变 得 更 好 了 ， 行 为 处 理 代码 与 目标 元 素 绑 定 在 一 
起 ， 这 样 更 易 读 和 易于 维护 。 自 定义 事件 开启 了 前 端 基于 事件 驱动 编程 的 大 门 。 
下 面 我 们 来 实现 输入 微 博时 字数 限制 的 功能 。 
HTMLS5 代码 如 下 : 
<div id="word"><img src="images/send weibo.png" /> 
<div class="aviableCount" > 还 可 以 输入 <span>140</span> 字 
</div></div> 


<div id="box"> 
<div class="box1"> 


// 设 置 最 大 输入 字符 长 度 为 140 
<textarea name="weiboTextArea" id = "weiboTextArea" class="box2" 
maxlength="140" ></textarea> 
</div> 
</div> 
样式 代码 如 下 : 
#word{ 
margin:15px Opx Opx 20px; 
padding:0px; 
} 
#box{ 


//background-color:#063; 
width:550px; 
height:90px; 


} 
.boxl{ 
width:542px; 
height:50px; 
margin:7px Opx Opx Opx; 
padding:2px 3px Opx 3px; 
} 
.aviableCount{ 


float: right; 
} 
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-Warningf 
color: red; 


} 


jQuery 代码 如 下 : 
// 全 局 变量 


var defaults = { 
allowed: 140, 
warning: 25, 
cssWarning: "warning'yv 
}; 
// 添 加 事件 
$ ("#weiboTextArea") .on ('keyup'，function (event) { 
event .preventDefault (); 
var count = $ (this) .val() .length; 
var available = defaults.allowed - count; 
if(available <= defaults.warning && available >= 0){ 


/7 设置 可 输入 字数 的 样式 


$(".aviableCount span") .addClass (defaults.cssWarning); 
} else { 


$(".aviableCount span") .removeClass (defaults.cssWarning); 


} 
// 动 态 更 新 可 以 输入 的 字数 
$(".aviableCount span") .html (available); 


]) 7 


本 章 小 结 


本 章 我 们 学 习 了 jQuery 的 页 面 操作 的 各 种 方法 和 事件 处 理 机 制 。 利 用 目前 所 学 的 知识 ， 
我 们 可 以 使 用 强大 的 选择 器 来 选择 元 素 ， 然 后 将 它们 移动 到 页 面 的 任意 部 位 ， 也 可 以 复制 、 
移动 、 奉 换 元 素 ， 甚 至 从 头 创建 全 新 的 元 素 。 而 实现 这 些 功 能 的 代码 都 非常 简洁 。 

最 后 我 们 学 习 了 jQuery 事件 、 触 发 事件 和 自 定义 事件 。 我 们 了 解 了 在 处 理 Web 页 面 事 
件 时 一 些 棘手 的 挑战 ， 这 些 技能 对 于 创建 交互 式 的 Web 页 面 是 必 不 可 少 的 。 


本 章 练习 
1. jQuery 的 元 素 选择 器 有 哪儿 种 ? 


2. jQuery 中 绑 定 事件 和 移 除 事件 的 方法 是 什么 ? 
3. 谈 一 谈 对 事件 驱动 编程 的 理解 。 


第 7 章 ”基于 jQuery 的 Ajax 技 术 


在 2005 年 ，Jesse James Garrett 创建 了 术语 Ajax(Asynchronous JavaScript and XML)， 它 
是 异步 JavaScript 和 XML 的 英文 缩写 。 这 项 技术 以 新 的 方式 改变 了 Web 的 外 观 ， 不 必 加 载 
整个 页 面 就 可 以 向 服务 器 发 起 异步 请 求 ， 用 户 可 以 在 页 面 无 刷新 的 情况 下 与 服务 器 交互 。 

其 实 早 在 1998 年 , 微软 就 引入 了 一 个 ActiveX 控件 ,从 而 能 够 在 脚本 控制 下 执行 异步 请 
求 ， 但 当时 似乎 很 少 有 人 关注 其 中 潜在 的 技术 。 又 过 了 几 年 ， 几 个 非 微软 浏览 器 将 该 技术 的 
标准 化 版 本 实现 为 XMLHttpRequestCXHR) 对 象 。 

本 章 内 容 : 

e@ 介绍 Ajax 异步 请 求 的 原理 

@ 介绍 jQuery 如 何 让 使 用 Ajax 技术 易如反掌 


7.1 Ajax 异步 请 求 原理 


7.1.1 Ajax 技术 应 用 程序 模型 


传统 的 Web 应 用 程序 (如 普通 的 JSP 程序 ) 的 运行 过 程 是 : 发 送 请 求 给 服务 器 ， 服务 器 对 
请 求 进行 处 理 (此 时 客户 端 须 等 待 )， 处 理 完成 后 服务 器 发 送 回 全 新 的 页 面 ， 如 图 7-1 所 示 。 
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图 7-1 传统 的 Web 应 用 程序 


为 了 加 快 页 面 打开 的 速度 并 降低 服务 器 的 压力 ， 人 们 想 出 了 一 种 方案 ， 就 是 在 与 Web 
服务 器 交互 的 过 程 中 只 传输 页 面 上 须 做 更 改 的 区 域 ， 而 不 传输 整个 页 面 ， 这 样 使 传输 的 数据 
大 大 减少 ， 从 而 缩短 了 传输 时 间 ; 同时 ， 在 与 Web 服务 器 交互 的 过 程 中 ， 客 户 端 仍然 可 以 在 
当前 页 面 继续 操作 , 正常 使 用 应 用 程序 , 而 不 必 等 待 服务 器 的 响应 。 这 就 是 Ajax 技术 的 思想 ， 
它 极 大 地 优化 了 用 户 的 体验 。Ajax 的 工作 原理 是 : 客户 端 浏 览 器 在 运行 时 首先 加 载 一 个 Ajax 
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引擎 (该 引擎 由 JavaScript 编写 ); Ajax 引擎 创建 一 个 异步 调用 的 对 象 ， 向 Web 服务 器 发 出 一 
个 HTTP 请 求 ， 服务 器 端 处 理 请 求 ， 并 将 处 理 结果 以 XML 的 形式 返回 ; Ajax 引擎 接收 返回 的 
结果 ， 并 通过 JavaScript 语句 显示 在 浏览 器 上 。Ajax 的 核心 是 JavaScript 对 象 XmlHttpRequest， 
XmlHttpRequest 使 得 开发 人 员 可 以 使 用 JavaScript 向 服务 器 提出 请 求 并 处 理 响应 。Ajax 的 
Web 应 用 程序 模型 如 图 7-2 所 示 。 





图 7-2 Ajax 的 Web 应 用 程序 模型 


7.1.2 使 用 原始 的 Ajax 与 服务 器 通信 


一 个 Ajax 请 求 的 生命 周期 包括 : 创建 并 设置 XMLHttpRequest 对 象 、 发 起 请 求 、 保 持 跟 
踪 状 态 、 获 取 响 应 。 
1. 创建 并 设置 XMLHttpRequest 对 象 


由 于 了 E6 浏览 器 使 用 了 ActiveX 的 专 有 方式 , 而 其 他 浏览 器 使 用 的 是 标准 的 XMLHttpRequest 
对 象 ， 所 以 创建 XMLHttpRequest 对 象 的 代码 如 下 : 


Var xmlhttp; 
if (window.XMLHttpRequest) 
{ 
// code for IE7T+, Firefox, Chrome, Opera, Safari 
xmlhttp=new XMLHttpRequest (); 
} 
else 
{ 
// code for IE6 
xmlhttp=new ActiveXObject ("Microsoft .XMLHTTP"); 


} 


2. 发 起 请 求 
在 向 服务 器 发 出 请 求 之 前 ， 还 需要 对 XMLHttpRequest 对 象 做 一 些 设置 : 设置 HTTP 请 
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求 的 类 型 (GET 或 者 POST)、 设 置 请 求 资源 的 URL 地 址 、 设 置 状态 跟踪 处 理 器 、 设 置 POST 
请 求 的 发 送 数据 。 

XMLHttpRequest 对 象 的 open0 方 法 指定 了 请 求 资源 的 http 请 求 类 型 、 文 件 名 、 是 否 异步 
方式 。 代 码 如 下 : 


xmlhttp.open ("GET", "a.html",true); 


第 三 个 参数 为 布尔 型 ， 表 示 是 否 异 步 ( 默 认为 true)， 毕 竞 发 起 同步 请 求 的 需求 很 少 。 但 
这 个 方法 不 会 将 请 求 发 送 到 服务 器 。 

XMLHttpRequest 对 象 还 要 准备 接收 服务 器 端 返回 的 文档 或 内 容 ， 还 要 告诉 用 户 请 求 的 
状态 。XMLHttpRequest 对 象 的 onreadystatechange 事件 可 以 确切 地 知道 请 求 当前 的 状态 是 什 
么 。 设 置 onreadystatechange 事件 代码 如 下 : 


xmlhttp.onreadystatechange=function() {} 

其 中 绑 定 的 事件 处 理 函 数 的 细节 会 在 下 一 小 节 详 述 。 

发 送 请 求 的 最 后 一 步 是 将 请 求 对 象 发 送出 去 ， 这 个 步骤 是 通过 send0 方 法 实现 的 。 如 果 
是 GET 请 求 方式 ， 代 码 如 下 : 

xmlhttp.send (null); 

如 果 是 POST 请 求 方式 ， 需 要 在 send0 方 法 中 设置 我 们 希望 发 送 的 数据 。 例 如 : 


xmlhttp .send('"a=1&b=2&c=3'); 


onreadystatechange 状态 处 理 函 数 可 以 通知 页 面 请 求 的 进度 。 一 旦 send0 方 法 发 出 请 求 后 ， 
随 着 请 求 在 不 同 状态 之 间 转 变 , 此 函数 会 被 调用 多 次 。readyState 属性 表示 服务 器 对 当前 请 求 
的 处 理 状 态 ， 在 状态 处 理 函 数 中 可 以 根据 这 个 值 来 进行 不 同 的 处 理 。readyState 有 5 种 取 值 ; 
0 代表 尚未 初始 化 ; 1 代表 正在 加 载 ，2 代表 加 载 完毕 ; 3 代表 正在 处 理 ; 4 代表 处 理 完毕 。 
例如 : 


xmlhttp .onreadystatechange=function() 
{ 
if (xmlhttp.readyState==4 && xmlhttp.status==200) 
{ 
// 请 求 成 功 ， 处 理 响 应 数据 
Var message = xmlHttp.responseText; 
}else{ 
// 错 误 处 理 
} 
} 





一 旦 readyState 属性 的 值 变 成 4, 就 表明 服务 器 已 经 处 理 完毕 。 还 需要 判断 status 属性 的 
值 以 确定 请 求 是 否 成 功 。status 的 全 称 是 HTTP 状态 码 (HTTP Status Code)， 用 以 表示 网 页 服 
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务 器 HTTP 响应 状态 的 3 位 数字 代码 。 以 2 开头 的 状态 码 , 代表 请 求 已 成 功 地 被 服务 器 接收 、 
理解 并 接受 ， 以 3 开头 的 状态 码 代表 需要 客户 端 采取 进一步 的 操作 才能 完成 请 求 ， 通 常 以 3 
开头 的 状态 码 用 来 重 定向 ， 以 4 开头 的 状态 码 代表 客户 端 看 起 来 可 能 发 生 了 错误 ， 妨 得 了 服 
务 器 的 处 理 ， 以 5 开头 的 状态 码 代表 服务 器 在 处 理 请 求 的 过 程 中 有 错误 或 者 异常 状态 发 生 。 
例如 200( 请 求 已 成 功 )、302( 请 求 的 资源 临时 转移 到 不 同 的 URD、404( 服 务 器 找 不 到 请 求 的 
网 页 )、410( 已 删除 )、500( 服 务 器 端的 源 代码 出 现 错误 )、502( 错 误 网 关 )。 

4. 获取 响应 


当 readyState 属性 的 值 变 为 4 并 且 status 属性 的 值 为 200 时 ， 表 明 服 务 器 已 经 处 理 完毕 
且 没有 发 生 错 误 ， 这 时 就 可 以 处 理 服务 器 返回 的 数据 了 。Ajax 请 求 的 响应 不 一 定 是 XML 格 
式 , 它 可 以 是 普通 的 文本 、HTML 片段 .JSON 格式 。 不 论 是 哪 种 格式 , 都 可 以 使 用 responseText 
属性 获取 数据 。 还 可 以 使 用 responseXML 获取 数据 ， 但 只 有 响应 内 容 类 型 头 为 “text/xml” 
时 ，responseXML 才 会 被 解析 成 为 一 个 XML 文档 。 例 如 : 

















xmlhttp .onreadystatechange=function() 
{ 
if (xmlhttp.readyState==4 && xmlhttp.status==200) 
{ 
// 请 求 成 功 ， 处 理 响应 数据 
Var xmlDoc = xmlhttp.responseXML.documentElement; 
Var xSel = xmlDoc.getElementsByTagName ("select"); 
}elsef{ 
// 错 误 处 理 
} 
} 


下 面 的 例子 将 上 面 的 步骤 合并 为 一 个 例子 : 


<html> 
<head> 
<meta charset="utf-8"> 
<script> 
function ajaxLoad(){ 

var xmlhttp; 

if (window.XMLHttpRequest) 

{ 

xmlhttp=new XMLHttpRequest () 


xmlhttp=new ActiveXObject ("Microsoft .XMLHTTP"); 
} 
xmlhttp .onreadystatechange=function () { 
if (xmlhttp.readyState==4 && xmlhttp.status==200) 
{ 
document .getElementById ("myDiv") .innerHTMI=xmlhttp. responseText; 
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}elsef{ 
console.log("ajax onreadystatechange error") 7 
} 
} 
xmlhttp.open ("GET", "loadResourse.html",true); 
xmlhttp.send(); 
} 
</script> 
</head> 
<body> 
<h2>AJAX</h2> 
<button type="button" onclick="ajaxLoad () "> 请 求 数据 </button> 
<div id="myDiv"></div> 
</body> 
</html> 


可 见 Ajax 技 术 的 主要 内 容 包括 :基于 Web 标 准 HIML+CSS 的 表示 ;使 用 DOM(Document 
Object ModeD 进 行动 态 显示 及 交互 ;使 用 XML 和 JSON 进行 数据 交换 及 相关 操作 ， 使 用 
XMLHttpRequest 进行 异步 数据 加 载 ， 使 用 JavaScript 将 所 有 的 东西 绑 定 在 一 起 。 


7.2 jQuery 中 载 人 文档 


jQuery 封装 了 7.1.2 节 中 异步 提交 的 代码 ， 简 化 了 我 们 的 操作 ， 同 时 能 够 兼容 各 个 浏览 
器 的 差异 。jQuery 提供 了 多 个 与 Ajax 有 关 的 方法 ， 包 括 load0 方 法 、$.getJSON0 方 法 、 
$.getScript( 方 法 、$.get( 方 法 、$post(0 方 法 、$.ajax( 方 法 等 。 


7.2.1 load() 方 法 载 入 文档 
使 用 10ad0 方 法 可 以 轻松 地 从 服务 器 端 加 载 内容 ， 它 的 语法 为 : 


load (url, [datal], [callback]) 


其 中 url 表示 服务 器 资源 的 URL， 可 以 在 后 面 添 加 选择 器 。data 表示 作为 请 求 参数 传递 
的 任何 数据 ， 可 以 是 字符 串 也 可 以 是 对 象 。callback 表示 加 载 成 功 后 执行 的 回调 函数 。7.1.2 
节 的 例子 我 们 可 以 用 load0 方 法 实现 ， 代 码 如 下 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>load demo</title> 
<script src="https://code.jQuery.com/jQuery-2.1.1.js"></script> 
</head> 
<body> 
<h2>AJAX</h2> 
<button type="button" id="projects"> 请 求 数据 </button> 
<div id="myDiv"></div> 
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<script> 

$( "projects" ).load( "./loadResourse.html™" ); 
</script> 

</body> 

</html> 


其 中 loadResourse.html 的 代码 为 : 


<!doctype html> 

<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>Sample Page</title> 

</head> 

<body> 

<h1>jQuery 技术 </h1> 

<ul id="projects"> 
<1i>jQuery</1i> 
<1i>jQuery UI</1i> 
<1i>jQuery Mobile</1i> 

</ul> 

</body> 

</html> 


如 果 要 筛选 load0 方 法 返回 的 元 素 ，jQuery 允许 在 URL 上 指定 选择 器 ， 只 要 在 URL 后 
添加 紧 随 空格 后 的 选择 器 就 可 以 ， 例 如 : 


$( "projects" ).load( "./loadResourse.htm]l #projects" ); 


7.2.2 JSON 格式 


JSON(JavaScript Object Notation) 是 一 种 轻 量 级 的 数据 交换 格式 ， 它 基于 JavaScript 标准 ， 
采用 完全 独立 于 语言 的 文本 格式 。 这 些 特性 使 JSON 成 为 理想 的 数据 交换 语言 ， 易 于 人 阅读 
和 编写 ， 同 时 也 易于 机 器 解析 和 生成 。 

JSON 语法 是 JavaScript 对 象 表示 语法 的 子 集 。 语 法 如 下 : 

e 数据 在 名 称 / 值 对 中 

e 数据 由 逗号 分 隔 

e 人 花 括号 保存 对 象 

@ 方 括号 保存 数组 

例如 : 


{"programmers":[ 
{"firstName":"san","lastName":"zhang", "email":"aaaa"}, 
si", "lastName":"1i", "email":"bbbb"}, 
{"firstName":"wu", "lastName":"wang", "email":"cccc"} 


]， 





{"firstName 
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"authors":[ 


"firstName":"yao", "lastName":"]u", "genre":" fantasy"}, 


"firstName":"Tad", "lastName":"Williams","genre":" 


{ 
{ 
{"firstName":"Frank", "lastName":"Peretti", "genre":" 
】 
} 


JSON 值 可 以 是 : 

e 数字 (整数 或 浮 点 数 ) 
e 字符 串 ( 在 双 引 号 中 ) 
。 风 辑 值 (true 或 false) 
e 数组 (在 方 括号 中 ) 
e 对 象 (在 花 括号 中 ) 


® null 








可 以 使 用 内 置 的 JSON 对 象 把 一 个 字符 串 转换 为 JSON 对 象 ， 


sciencefiction"}, 
christianfiction"} 


例如 : 


本 机 全 加 人 


输出 的 对 象 结构 如 图 7-3 所 示 。 
v Object {1: 1, 2: 2, 3: Object} E 

1: 1 

2; 2 


v3: Object 
4: 4 
v5: Object 
6: 6 


图 7-3 输出 的 对 象 结构 





注意 : 使 用 JSON.parse( 方 法 时 单 引 号 写 在 们 外 ， 每 个 属性 名 都 必须 用 双 引 号 ， 否 则 会 


抛 出 异常 。 下 面 把 一 个 对 象 转换 为 字符 串 ， 例 如 : 
var a = {a:l,b:2}; 


JSON.stringify(a); 
// 输 出 "{"a":1, "bp":2}" 


7.2.3 比较 JSON 和 XML 数据 格式 


XML 是 可 扩展 标记 语言 (extensible markup language)， 一 种 类 似 于 HTML 的 语言 ， 它 没 
有 预先 定义 的 标签 ， 使 用 DTD(document type definition， 文 档 类 型 定义 ) 来 组 织 数据 ， 并 且 格 
式 统一 ， 跨 平台 和 语言 ， 早 已 成 为 业界 公认 的 标准 。XML 的 优点 是 格式 统一 、 符 合 标准 ， 
容易 与 其 他 系统 进行 远程 交互 , 数据 共享 比较 方便 , 还 是 企业 服务 总 线 (ESB) 方 案 中 的 理想 选 








择 。 但 其 也 有 缺点 ， 包 括 : XML 文件 庞大 ， 格 式 复杂 ， 传 输 占 上 








带宽 ， 服 务 器 端 和 客户 端 


都 需要 花费 大 量 代码 来 解析 XML， 使 得 服务 器 端 和 客户 端 代码 变 得 异常 复杂 和 不 容易 维护 ， 
需要 重复 编写 很 多 代码 ; 服务 器 端 和 客户 端 解析 XML 花费 较 多 资源 和 时 间 。 
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JSON 也 用 来 表示 文本 数据 ， 也 可 以 跨 平 台 。 它 的 优点 包括 : 数据 格式 比较 简单 、 易 于 
读 写 、 占 用 带宽 小 、 浏 览 器 解析 速度 快 ， 构造 友好 、 支 持 多 种 语言 ， JSON 格式 能 够 直接 为 
服务 器 端 代 码 使 用 ， 大 大 简化 了 服务 器 端 和 客户 端的 代码 开发 量 。 其 缺点 包括 : 没有 XML 
那么 通用 ， 在 Web Service 中 推广 还 属于 初级 阶段 。 

本 书 接 下 来 的 程序 大 多 采用 JSON 数据 格式 与 服务 器 进行 通信 。 

下 面 介绍 人 人 微 博 网 站 中 后 台 提 供 的 API， 返 回 的 数据 也 都 是 JSON 格式 。 

1. 新 增 用 户 


接口 说 明 : 新 增 用 户 。 

URL: http://localhost:8080/rrwb/crud/user/add。 
HTTP 请 求 方式 : POST/GET。 

请 求 参数 如 表 7-1 所 示 。 









































表 7-1 请 求 参数 

参数 名 称 | 类 型 | 说 _ 阴 
login_name 登录 名 ， 必 输 
nick_ name 昵称 ， 必 输 
img 缩 咯 图 地 址 
real name 真实 姓名 
provinceValue 所 在 省 份 编号 
provinceName 所 在 省 份 名 称 
cityValue 所 在 城市 编号 
cityName 所 在 城市 名 称 
gender 性 别 
age 年 龄 
other email 备用 邮箱 
blog 博客 地 址 
qq 
pwd 
msn 
birthday 





响应 参数 如 表 7-2 所 示 。 


表 7-2 响应 参数 
参数 名 称 描述 
0: 插入 失败 
1: 插入 成 功 





2. 根据 id 查询 用 户 
接口 说 明 : 根据 用 户 id 查找 用 户 。 
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URL: http://localhost:8080/rrwb/crud/user/edit。 
HTTP 请 求 方式 : POST/GET。 
请 求 参数 如 表 7-3 所 示 。 


表 7-3 ”请 求 参数 
参数 名 称 类 型 说 明 





Jid Number 用 户 id， 必 输 


响应 参数 如 表 7-4 所 示 。 





表 7-4 ”响应 参数 
参数 名 称 类 型 描述 
0: 插入 失败 
code Number 1; 插入 成 功 


3. 根据 用 户 登 录 名 查找 用 户 
接口 说 明 : 根据 用 户 登 录 名 查找 用 户 。 
URL: http://localhost:8080/rrwb/crud/user/findUserByName. 
HTTP 请 求 方式 : POST/GET。 
请 求 参 数 如 表 7-5 所 示 。 
表 7-5 请 求 参 数 
参数 名 称 说 明 


login_name 登录 名 ， 必 给 


响应 参数 如 表 7-6 所 示 。 


表 7-6 ”响应 参数 


参数 名 称 描述 
0: 插入 失败 
1: 插入 成 功 





4. 根据 用 户 昵称 查找 用 户 

接口 说 明 : 根据 用 户 昵称 查找 用 户 。 

URL: http://localhost:8080/rrwb/crud/user/ fmndUserByNickName。 
HTTP 请 求 方式 : POST/GET。 

请 求 参数 如 表 7-7 所 示 。 


表 7-7 请 求 参数 
参数 名 称 类 型 说 了 明 





nick name String 昵称 ， 必 和 输 
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响应 参数 如 表 7-8 所 示 。 


表 7-8_ 响 应 参数 








参数 名 称 描述 
0: 插入 失败 
we 1: 插入 成 功 


5. 根据 用 户 昵称 模糊 查找 用 户 


接口 说 明 : 根据 用 户 昵 称 模糊 查找 用 户 ， 并 可 以 分 页 查询 。 
URL: http://localhost:8080/rrwb/crud/user/findUserLikeNickName。 
HTTP 请 求 方式 : POST/GET。 

请 求 参数 如 表 7-9 所 示 。 


表 7-9 请 求 参数 





参数 名 称 类 型 i 
nick name String 昵称 ， 必 和 输 


id 用 户 这 ， 必 答 
page 当前 页 数 ， 从 1 开始 
size 每 页 显示 的 数量 


响应 参数 如 表 7-10 所 示 。 





表 7-10 “响应 参数 


参数 名 称 说 有明 


- 0: 插入 失败 


pages 查询 到 的 总 页 数 








String 查询 到 的 数据 的 数组 

IOWS String 查询 到 的 记录 总 数量 

6. 用 户 登录 

接口 说 明 : 根据 用 户 名 和 密码 验证 用 户 登录 。 

URL: http://localhost:8080/rrwb/crud/user/ login。 

HTTP 请 求 方式 : POST/GET。 

请 求 参数 如 表 7-11 所 示 。 

表 7-11 请 求 参数 

明 











响应 参数 如 表 7-12 所 示 。 
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表 7-12 ”响应 参数 
参数 名 称 说 明 
0: 插入 失败 
oe 1: 插入 成 功 
data 查询 到 的 数据 的 数组 
IOWS 查询 到 的 记录 总 数量 
例如 : 


{"code" :1, "pages":1l,"data":[{"” id":103,"]login name":"1@1.com","gender": 
"female", "nick name":"hello", "pwd":"111111", "status":true, "timestamp": 
"nick name":"wuyuan", "pwd":"111111", "status":true, "timestamp":1426058627885}, 
{"_id":91,"login name":"zp@163.com", "gender":"female", "nick name":"zhangsan", 
"pwd":"111111", "status":true, "timestamp":1426058555856}], "rows":3} 


7.2.4 $.getJSON() 方 法 载 入 文档 


$.getJSON0O 方 法 的 语法 为 : 


1427088263009}, {" id":92,"login name":"wyy@163.com","gender":"female", 


$.getJSON (url, data, success (responseData, status, xhr)) 


其 中 url 表示 服务 器 资源 的 URL， 可 以 在 后 面 添 加 选择 器 。data 表示 作为 请 求 参数 传递 
的 任何 数据 ， 可 以 是 字符 串 也 可 以 是 对 象 。success 表示 加 载 成 功 后 执行 的 回调 函数 ， 回 调 函 
数 的 第 一 个 参数 是 返回 的 数据 ， 第 二 个 参数 是 字符 串 表 示 的 请 求 状态 ("success"、 
"notmodified"、"error"、"timeout"、"parsererror")， 第 三 个 参数 表示 XMLHttpRequest 对 象 。 比 
如 有 一 个 名 为 testjson 的 文件 ， 内 容 如 下 : 


{ 
mone": "一 步 " 
ntwo": "两 步 " 
"three": "三 步 " 
} 


那么 使 用 $.geJSON0O 方 法 就 可 以 在 网 页 中 加 载 这 个 JSON 文档 。 由 于 加 载 的 JSON 数据 
不 能 在 页 面 中 直接 显示 ，success 回调 函数 的 作用 就 是 处 理 JSON 数据 使 其 在 页 面 上 显示 。 
success 回调 函数 的 第 一 个 参数 data 代表 返回 的 数据 。 代 码 如 下 : 


<!doctype html> 
<html lang="en"> 
<head> 

<meta charset="utf-8"> 

<title>Sample Page</title> 

<script src="https://code.jQuery.com/jQuery-2.1.1.js"></script> 

</head> 
<body> 
</body> 
<script> 
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$.getJSON( "test.json", function( data ) { 
var items = []; 
$.each( data, function( key, val ) { 
items.push( "<li id="'" + key + "™'>" + val + "</l1i>" ); 
Hs 
Scan 4 
html: items.join( "" ) 
}) .appendTo( "body™ ); 
1D); 
</script> 
</html> 


上 面 的 代码 将 加 载 的 数据 以 列表 的 形式 追加 到 body 中 。 在 jQuery 1.5 之 后 ， 允 许 在 
$.geUSONUO 之 后 链 式 调 用 .done0、.always0 和 .fail0 函 数 ， 例 如 : 


$.getJSON( "test.json") .done (function( data ) { 
alert( "Data Loaded: " + data ) 7 

}) .fail(function() { 
console.1og("error") 7 

}) .always (function() { 
console.log("complete"); 


1D); 
下 面 我 们 来 实现 注册 时 验证 登录 名 和 昵称 是 否 重复 的 功能 ， 代 码 如 下 : 


$ ("#1login name") .blur (function (event) { 
Var login name = $("#login name") .val(); 





Var login name checkOk = false; 
if(check mobile(login name) || check email (login name)){ 
login name checkOk = true; 
} 
if(!login name checkOk){ 
$("#login name") .val(''); 
alert ("格式 不 正确 ") ; 
return; 
} 
// 检 查 用 户 登 录 名 
$.getJSON('http://localhost:8080/rrwb/crud/user/findUserByName? 
login name="'+login name) .done (function (response) { 
if (response.code == "1"){ 
if(response.data.length>0)1{ 
$ ("#1login name") .val(''); 


alert ("已 被 占用 ! "); 


}) 
-fail(function() { 
console.1log ("error"); 


}) 


Hs 
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$ ("#password") .blur (function (event) { 
Var num=$ ("#password") .val () .length; 
if(num<6){ 
$("#password") .val (''); 
alert ("密码 小 于 6 位 "); 


}else if(num>18){ 
$("#password") .val (''); 
alert ("密码 大 于 18 位 "); 


}else { 


]) 


$("#re password") .blur (function (event) { 
Var num=$ ("#re password") .val () .length; 
if (num<6){ 
$("#re password") .val (''); 
alert ("密码 小 于 6 位 "); 


}else if(num>18){ 
$("#re password") .val (''); 
alert ("密码 大 于 18 位 "); 
} 
Var pass=$ ("#password") .val (); 
var re pass=$ ("#re password") .val (); 
if (pass!=re pass){ 
$("#re password") .val (''); 
alert ("密码 不 一 致 ") ; 
} 
1D); 
$("#nickname") .blur (function (event) { 
var nickname=$ ("#nickname") .val (); 
if (nickname.length==0){ 
alert ("请 输入 昵称 ") ; 
}elsef{ 
// 检 查 用 户 昵称 
$.getJSON('http://localhost:8080/crud/user/findUserByNickName?nick 
_name="'+nickname) .done (function (response) { 
if (response.code == "1"){ 
if(response.data.length>0){ 
$("#nickname") .val (''); 


alert ("已 被 占用 ! "); 


}) 
-fail(function() { 
console.1log ("error"); 
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7.2.5 ”$.getScript() 方 法 载 入 文档 

当 网 站 需要 加 载 大 量 js 时 , 动态 地 加 载 js 就 是 一 个 比较 好 的 方法 , 当 需 要 某 个 功能 时 再 
将 相应 的 js 加 载 进来 。jQuery 提供 了 S$.getScript0 方 法 获取 js 文件 ， 可 以 像 加 载 页 面 一 样 注入 
脚本 ， 并 且 所 注入 的 脚本 自动 执行 。 它 的 语法 为 : 

$.getScript (url,success (data status, xhr)) 

例如 : 


$.getScript( "test.js", function( data, textStatus, jqxhr ) { 
console.log( data ); // Data returned 
console.log( textStatus ); // Success 
console.log( jqxhr.status ); // 200 
console.log( " getScript was performed." ); 
1D); 
testjs 的 内 容 中 只 有 一 行 代 码 : 
console.log("in test.js"); 
输出 结果 为 : 


in test.js 
console.log("in test.js"); 
success 

200 

getScript was performed. 


7.3 ”jQuery 中 请 求 服务 器 数据 


7.3.1 $.post() 方 法 


$.post0 方 法 不 仅 可 以 载 入 远程 页 面 和 加 载 数据 ， 还 可 以 给 远程 页 面 发 送 数 据 ， 在 发 送 数 
据 的 时 候 是 以 POST 方式 发 送 的 。 它 的 语法 为 : 


$.post( url [, data ] [, success ] [, dataType ] ) 


其 中 有 些 参数 可 以 省 略 ， 与 之 相应 的 逗号 也 可 以 省 略 。 各 个 参数 的 说 明 如 表 7-13 所 示 。 
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表 7-13 $.post0 方 法 的 参数 
参数 名 称 说 了 明 


tl String 请 求 资源 的 URL 地 址 





data | Object | 发 送 给 服务 器 的 key:value 数据 





success Function | 回调 函数 ， 载 入 成 功 后 会 执行 的 函数 





服务 器 端 返回 的 内 容 的 格式 ， 可 以 是 html、json、xml、script、jsonp、text 等 


下 面 我 们 来 实现 注册 时 提交 注册 信息 到 服务 器 的 功能 ， 代 码 如 下 : 


function regist(){ 
var login name = $("#login name") .val(); 
var password = $("#password") .val (); 
Var re password = $("#re password") .val(); 
Var nickname = $("#nickname") .val (); 


var gender = $("input [type='radio'] :checked") .val (); 


if (login name.length>0&&password.length>0&&re password.length> 


Oggnickname.length>0g&gender.length>0){ 


$.post('http://localhost:8080/rrwb/crud/user/add', 


{"login name": login name,"pwd":re password,"gender":gender, 


"nick name":nickname}, 
function (response) { 
if(response.code == "1"){ 
// 设 置 注册 按钮 不 可 用 
$('a').attr("disabled","disabled"); 
alert ("注册 成 功 ! "); 
// 转 到 登录 页 面 
location.href="index.html" 
console.log("success"); 


7.3.2 $.get() 方 法 


$.get0 方 法 与 $.post0 方 法 的 用 法 相似 ， 区 别 在 于 发 送 数据 时 以 POST 方式 发 送 。 语 法 为 : 





$.get( url [, data ] [, success ] [, dataType ] ) 


其 中 参数 的 意义 与 $.post0 方 法 的 参数 意义 相同 。 这 里 使 用 $.get0 方 法 实现 登录 功能 ， 代 





码 如 下 : 


$ (document) .ready (function() { 
$( "#login btn™" ).click(function(event) { 
var login name=document .getElementById ("login name"); 
Var password=document .getElementById ("password"); 
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login name.value=login name.value.replace(/\s{1,}/g,""); 


if (login name.value==""){ 
alert ("请 输入 账户 ! "); 
login name.focus(); 
return; 


if (password.value==""){ 
alert ("请 输入 密码 ! "); 


password.focus () 7 





return; 
} 
$.get( 
'http://localhost:8080/rrwb/crud/user/login', 
{login name: login name.value,pwd:password.value}, 
function (response) { 
if(response.rows == 1 ){ 
// 使 用 sessionStorage 存储 userId 
sessionStorage.userId=response.data[0]. id; 
// 转 向 个 人 主页 
location.href = "home.html"; 
}else{ 
event .preventDefault (); 


alert ("用 户 名 或 密码 错误 ") ; 


7.3.3 ”表单 的 序列 化 方法 


在 表单 中 的 输入 框 较 少 的 情况 下 ， 可 以 通过 名 称 属性 逐个 搜索 输入 字段 来 传输 数据 ， 如 
果 表 单 的 输入 字段 过 多 ， 这 种 方式 就 比较 麻烦 ， 而 且 缺 乏 灵活 性 。 为 了 解决 这 个 问题 ,jQuery 
引入 了 serialize0 方 法 ， 该 方法 可 以 简化 参数 传 值 的 方式 ， 其 调用 的 语法 格式 如 下 : 


$ (selector) .serialize() 


通过 该 方法 将 创建 一 个 以 标准 URL 编码 方式 表示 的 文本 字符 串 并 返回 该 字符 串 , 在 Ajax 
请 求 中 可 将 该 字符 串 发 送 给 服务 器 。 例 如 : 


<form> 


<!-- 能 够 被 序列 化 的 元 素 类 型 --> 


<input type="text" name="a" value="1" id="a" /> 





<input type="text" name="b" value="2" id="b" /> 
" value="3" id="c" /> 


cols="40">4</textarea> 





<input type="hidden" name="c 





<textarea name="d" rows="8 


<select name="e"> 


第 7 章 基于 jQuery 的 Ajax 技术 *197* 








<option value="5" selected="selected">5</option> 
<option value="6">6</option> 
<option value="7">7</option> 
</select> 
<input type="checkbox" name="f" value="8" id="fl" checked="checked" /> 
<input type="checkbox" name="f" value="9" id="f2" /> 
/SS 
<input type="radio" name="g" value="11" checked="checked" id="g2"/> 
<input type="password" name="h" maxlength="8" value="h" /> 
<!-- 不 能 够 被 序列 化 的 元 素 类 型 --> 


<input type="submit" name="i" value="Submit" id="i" /> 





<input type="radio" name="g" value="10" id=" 





<input type="button" name="j" value="Click me" onclick="msg()" /> 
<input type="file" name="k" /><br /> 
<input type="reset" value="Reset" name="1"” /> 
<input type="image" src="" alt="Submit" /> 
</form> 
<p><tt id="results1l"></tt></p> 
<p><tt id="results2"></tt></p> 
<script> 





function showValues() { 
var str = $("form") .serialize(); 
$ ("#results2") .text (str); 
} 
$(":checkbox, :radio") .click(showValues); 
$ ("select") .change (showValues); 
showValues (); 
</script> 


上 面 的 代码 的 显示 结果 为 “a=1&b=2&c=3&d=4&e=5& 仁 8&g=11&h=h”。 
此 外 还 有 一 个 方法 可 以 序列 化 表单 ， 唯 一 的 区 别 在 于 该 方法 不 是 返回 字符 串 ， 而 是 将 一 


组 表单 元 素 编码 为 一 个 名 称 和 值 的 JSON 数组 对 象 。 这 个 方法 就 是 serializeArray0， 语 法 为 : 


$ (selector) .serializeArray () 


序列 化 后 得 到 的 对 和 象 格式 如 下 所 示 : 
[ 


{name: 'firstname', value: 'Hello'}, 
{name: 'lastname', value: jQuery}, 
{name: 'alias'}, 

] 


可 以 选择 一 个 或 多 个 表单 元 素 ， 比 如 input、textarea 或 者 form 元 素 本 身 。 
同样 是 serialize0 方 法 中 的 示例 ， 如 果 使 用 的 是 serializeAray0 方 法 序列 化 表单 ，jQuery 





EE] 


代码 如 下 : 


<script> 


function showValues() { 
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var fieldqs = $(":input") .serializeArray(); 
$ ("#results") .empty (); 
jQuery.each (fields, function(i, field){ 
$("#results1") .append (field.value + ™ "); 

]) 7 

} 

$(":checkbox, :radio") .click(showValues); 

$ ("select") .change (showValues); 

showValues (); 


</script> 

上 面 的 代码 的 显示 结果 为 “a:1 b:2 c:3 d:4 e:5 f8 g:11 hh”。 

serialize() 方 法 和 serializeArray0 方 法 使 用 了 W3C 关于 successful controls( 有 效 控件 ) 的 标 
准 来 检测 哪些 元 素 应 当 包 括 在 内 。 特 别 说 明 ， 元 素 不 能 被 禁用 (禁用 的 元 素 不 会 被 包括 在 内 )， 
并 且 元 素 应 当 含有 name 属性 。 提 交 按 钮 的 值 也 不 会 被 序列 化 ， 文 件 选 择 元 素 的 数据 也 不 会 
被 序列 化 。 

Ajax 的 出 现 带 来 了 单 页 Web 应 用 (single-page application，SPA)， 比 如 Gmail。 单 页 Web 
应 用 为 了 充分 利用 Ajax， 必 须 在 单一 页 面 中 包含 其 中 的 全 部 功能 , 或 者 是 至 少 包含 大 部 分 功 
能 ， 浏 览 器 与 Web 应 用 程序 的 所 有 交互 只 能 在 一 个 页 面 的 范围 内 进行 。 此 方法 对 Web 来 
说 是 一 种 创新 ， 它 可 以 像 Windows 桌面 程序 一 样 ， 独 立 加 载 、 更 新 和 替换 一 些 可 视 元 素 的 
组 合 。 

有 时 单 页 Web 应 用 是 一 种 从 Web 服务 器 加 载 的 胖 客户 端 应 用 。 

胖 客 户 端 是 相对 于 瘦 客 户 端 而 言 的 ， 瘦 客户 端 应 用 程序 中 浏览 器 只 解析 标准 的 HTML 
来 显示 用 户 交互 界面 。 这 样 ， 服 务 器 端 负责 处 理 业务 逻辑 和 数据 存 取 ， 然 后 将 处 理 完 的 结果 
以 HTML 的 形式 发 送 给 客户 端 , 客户 端 负责 将 结果 显示 给 用 户 。 客 户 端 除了 负责 一 些 数据 的 
验证 和 组 织 之 外 ， 基 本 上 不 处 理 任何 业务 罗 辑 ， 只 专注 于 用 户 交 互 界 面 的 显示 。 

胖 客户 端 应 用 程序 的 客户 端 部 分 除了 负责 将 程序 的 UI 界面 显示 给 用 户 进行 交互 外 ， 还 
负责 大 部 分 的 业务 逻辑 处 理 。 这 种 类 型 的 应 用 程序 需要 客户 端 部 分 具有 执行 任务 的 能 力 ， 对 
客户 端 机 器 的 要 求 比较 高 , 但 是 可 以 减轻 服务 器 很 大 一 部 分 压力 , 降低 对 服务 器 性 能 的 要 求 。 
典型 的 胖 客户 端 应 用 程序 拥有 丰富 的 交互 式 用 户 界 面 ， 用 户 通过 这 个 交互 界面 可 以 查看 和 操 
作 数 据 、 处 理 业 务 事务 等 ， 分 担 服务 器 的 一 部 分 或 者 全 部 业务 逻辑 的 处 理 。 

使 用 Ajax 构建 胖 客户 端 是 一 个 最 严峻 的 挑战 。 胖 客户 端 可 以 是 分 布 式 企业 系统 的 前 端 ， 
也 可 以 是 业务 线 应 用 程序 的 表现 逻辑 层 。 这 些 应 用 程序 无 论 是 发 布 到 Intemet 上 还 是 限制 在 
intranet( 内 部 网 络 ) 内 ， 都 需要 常规 桌面 UI 所 具有 的 丰富 性 和 速度 。 单 页 Web 应 用 会 包含 大 
量 的 JavaScript 代码 ， 复 杂 度 可 想 而 知 ， 模 块 化 开发 和 设计 的 重要 性 不 言 而 喻 。 单 页 Web 应 
用 也 有 一 些 缺 点 ， 所 有 的 内 容 都 在 一 个 页 面 中 动态 替换 显示 ， 对 搜索 引擎 优化 不 友好 。 由 于 
单 页 Web 应 用 在 一 个 页 面 中 显示 所 有 的 内 容 , 所 以 不 能 使 用 浏览 器 的 前 进 后 退 功能 , 所 有 的 
页 面 切换 需要 自己 建立 堆栈 管理 。 
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7.4 9$.ajax( 方 法 


7.4.1 详解 $.ajax() 的 细节 


jQuery 提供 了 更 底层 的 Ajax 通信 方法 ,我 们 可 以 利用 jQuery 提供 的 S.ajax( 方 法 控制 Ajax 
请 求 的 各 种 细节 。 $.get 和 S$.post 方法 最 终 都 是 使 用 这 个 函数 发 起 。 它 的 语法 为 : 


$.ajax([options]) 














它 的 参数 options 是 一 个 对 象 ， 其 格式 为 key/value。 它 可 以 定义 的 值 非常 多 ， 具 体 见 


表 7-14。 
表 7-14 S$.ajax() 方 法 的 参数 
参数 类 型 说 了 明 
ul String 发 送 请 求 的 地 址 
Stnn 要 使 用 的 HTTP 方法 。 通 常 是 GET 或 POST。 默认 为 GET 





data 


dataType 


String 


String 


发 送 到 服务 器 的 数据 。 将 自动 转换 为 请 求 字符 串 格式 。GET 请 求 中 将 附加 
在 URL 后 。 无 论 哪 种 情况 ，$.ajax0 函 数 都 会 负责 对 值 进行 编码 

预期 服务 器 返回 的 数据 类 型 。 如 果 不 指定 ，jQuery 将 自动 根据 HTTP 包 
MIME 信息 返回 responseXML 或 responseText, 并 作为 回调 函数 参数 传递 ， 
可 用 值 包括 : 

"xml": 返回 XML 文档 ， 可 用 jQuery 处 理 。 

"html": 返回 纯 文本 HTML 信息 ; 包含 script 元 素 。 

"script": 返回 纯 文本 JavaScript 代码 。 不 会 自动 缓存 结果 。 

"json": 返回 JSON 数据 。 

"jsonp": JSONP 格式 。 使 用 JSONP 形式 调用 函数 时 , 如 "myurl?callback=?" 
jQuery 将 自动 替换 ?为 正确 的 函数 名 ， 以 执行 回调 函数 





cache 


context 


String 


Object 


设置 为 false 将 不 会 从 浏览 器 缓存 中 加 载 请 求 信息 。 默认 为 trme， 除非 指定 
dataType 为 script 或 jsonp 
指定 某 个 元 素 为 这 个 请 求 的 所 有 回调 函数 的 上 下 文 





timeout 


Number 


设置 请 求 超时 时 间 ( 毫 秒 )。 此 设置 将 覆盖 全 局 设置 





global 


contentType 


String 


String 


是 否 触发 全 局 Ajax 事件 ， 默 认为 tue。 设 置 为 false 将 不 会 触发 全 局 Ajax 
事件 ， 如 ajaxStart 或 ajaxStop。 可 用 于 控制 不 同 的 Ajax 事件 

发 送信 息 至 服务 器 时 的 内 容 编码 类 型 。 默 认 值 为 "application/x-www-fom- 
urlencoded"， 适 合 大 多 数 应 用 场合 





eITOT 





String 





请 求 失败 时 将 调用 此 方法 。 这 个 方法 有 三 个 参数 : XMLHttpRequest 对 象 、 
错误 信息 、( 可 能 ) 捕 获 的 错误 对 象 
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( 续 表 ) 
参数 类 型 说 了 明 
请 求 完成 后 回调 函数 (请 求 成 功 或 失败 时 均 调用 )。 参 数 : XMLHttpRequest 





complete String i 
对 象 、 成 功 信息 字符 串 (success 或 error) 
beforeSend String 发 送 请 求 前 可 修改 XMLHttpRequest 对 象 的 函数 ， 如 添加 自 定义 HTTP 头 
默认 设置 下 (默认 为 true)， 所 有 请 求 均 为 异步 请 求 。 如 果 需 要 发 送 同 步 请 
async Boolean 求 ， 请 将 此 选项 设置 为 false。 注 意 ， 同 步 请 求 将 锁 住 浏览 器 ， 用户 的 其 他 


操作 必须 等 待 请 求 完成 才 可 以 执行 

默认 情况 下 (默认 为 tuej， 发 送 的 数据 将 被 处 理 为 URL 编码 格式 ， 适 合 与 
processData String "application/x-www-form-urlencoded" 一 起 使 用 。 如 果 要 发 送 DOM 树 信息 
或 其 他 不 希望 转换 的 信息 ， 请 设置 为 false 

如 果 设 置 为 tue， 则 只 有 当 响 应 内 容 相对 于 上 次 请 求 改 变 (根据 
Last-Modified 头 设置 ) 时 ， 请 求 才 被 认为 是 成 功 的。 默认 是 false 








ifModified Boolean 








Usemmame String 在 HTTP 认证 请 求 中 使 用 的 用 户 名 

password String 在 HTTP 认证 请 求 中 使 用 的 密码 

eg en 当 远程 和 本 地 内 容 使 用 不 同 的 字符 集 时 ， 用 来 设置 script 和 jsonp 请 求 所 
使 用 的 字符 集 

jsonp String 指定 一 个 查询 参数 名 称 覆 盖 默 认 的 参数 名 callback 

jsonpCallback | Strin 指定 jsonp 回调 函数 名 。 默 认 是 随机 生成 的 函数 名 





在 使 用 load 方法 加 载 html 的 例子 中 ,同样 的 操作 如 果 用 $.ajax0 来 实现 ， 代 码 如 下 所 示 : 


$.ajax({ 
url: './loadResourse.html ', 
method: 'GET', 
dataType: 'html' 
success: function (data) { 
$ ("#new-projects" ) .append (data); 
} 
1); 


$.ajax0 函 数 依 赖 服务 器 提供 的 信息 来 处 理 返 回 的 数据 。 如 果 服 务 器 报告 说 返回 的 数据 是 
XML,， 那么 返回 的 结果 就 可 以 用 普通 的 处 理 XML 的 方法 或 者 jQuery 的 选择 器 来 遍历 。 如 果 
得 到 其 他 类 型 的 数据 ， 比 如 HIML， 则 数据 就 以 文本 形式 来 对 待 。 

通过 dataType 选项 还 可 以 指定 其 他 不 同 数据 处 理 方式 。 除 了 单纯 的 XML， 还 可 以 指定 
html、json、jsonp、script 或 text。 其 中 ，text 和 xml 类 型 返回 的 数据 不 会 经 过 处 理 ， 数 据 仅 
仅 将 XMLHttpRequest 的 responseText 或 responseHTML 属性 传递 给 success 回调 函数 。 如 果 
指定 为 html 类 型 ,任何 内 髓 的 JavaScript 都 会 在 HIML 作为 一 个 字符 串 返回 之 前 执行 。 类 似 
地 ， 指 定 script 类 型 的 话 ， 也 会 先 执行 服务 器 端 生成 JavaScript， 然 后 再 把 脚本 作为 一 个 文本 
数据 返回 。 如 果 指 定 为 json 类 型 ， 则 会 把 获取 到 的 数据 作为 一 个 JavaScript 对 象 来 解析 ， 并 
且 把 构建 好 的 对 象 作为 结果 返回 。 为 了 实现 这 个 目的 ， 它 首先 尝试 使 用 JSONparse0。 
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如 果 指 定 了 script 或 者 jsonp 类 型 , 那么 当 从 服务 器 接收 到 数据 时 , 实际 上 是 用 了 <script> 
标签 而 不 是 XMLHttpRequest 对 象 。 这 种 情况 下 ，$.ajax0 不 再 返回 一 个 XMLHttpRequest 对 
象 ， 并 且 也 不 会 传递 事件 处 理 函 数 ， 比 如 beforeSend。 加 载 其 他 网 域 的 数据 的 时 候 涉 及 跨 域 
的 概念 ， 域 (Domain) 是 网 络 中 独立 运行 的 单位 ， 域 之 间 相互 访问 则 需要 建立 信任 关系 (Trust 
Relatiom)。 只 要 协议 、 域 名 、 端 口 有 任何 一 个 不 同 ， 都 被 当 作 是 不 同 的 域 。 有 一 种 简明 的 说 
法 来 解释 跨 域 ， 跨 域 访问 简单 来 说 就 是 A 网 站 的 JavaScript 代码 试图 访问 B 网 站 ， 包 括 提 交 
内 容 和 获取 内 容 。 由 于 安全 原因 ， 跨 域 访问 是 被 各 大 浏览 器 所 默认 禁止 的 。 

虽然 浏览 器 默认 禁止 了 跨 域 访问 ， 但 并 不 禁止 在 页 面 中 引用 其 他 域 的 JS 文件 ， 并 可 以 
由 执行 引入 的 JS 文件 中 的 函数 ， 这 也 是 JSONP 的 由 来 。JSONP 是 JSON with Padding 的 
简称 (Padding 在 这 里 理解 为 填充 ，JSONP 也 叫 填充 式 JSON)。 它 是 一 个 非 官方 的 协议 ， 它 通 
过 JavaScript callback 的 形式 实现 跨 域 访 问 ， 是 应 用 JSON 的 一 种 新 方法 ， 只 不 过 是 被 包含 在 
函数 调用 中 的 JSON 应 用 。 例 如 : 

















<script type="text/javascript"> 
function dosomething (jsondata) { 
// 处 理 获 得 的 json 数据 
</script> 
<script src="http://example.com/data.php?callback=dosomething"></script> 


js 文件 载 入 成 功 后 会 执行 我 们 在 url 参数 中 指定 的 函数 ， 并 且 会 把 我 们 需要 的 json 数据 
作为 参数 传 入 。 所 以 jsonp 是 需要 服务 器 端的 页 面 进行 相应 配合 的 。 下 面 是 服务 器 端 代 码 ; 


<?php 

$callback = $_GET['callback'];// 得 到 回调 函数 名 
$data = array('a', 'b', 'c');// 要 返回 的 数据 

echo $callback.'('.json encode ($data) .')';// 输 出 
?> 


最 终 ， 输 出 结果 为 “dosomething(['avb'vc]):”。 
jQuery 会 自动 生成 一 个 全 局 函数 来 替换 callback=? 中 的 问号 ， 在 获取 到 数据 后 又 会 自动 
销毁 。 比 如 我 们 使 用 jQuery 跨 域 访问 github.com 的 API， 代 码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<script src="https://code.jQuery.com/jQuery-2.1.1.js"></script> 
<script> 
// 如 果 去 掉 callback=? ， 则 不 能 访问 数据 
$.getJSON('https://api.github.com/users/musicpop?callback=?", 
function(result) { 
for(var i in result.data) { 


console.log(i+":"+result.data[il]); 
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</script> 

</head> 

</html> 

输入 结果 如 图 7-4 所 示 。 





login:musicpop 

id:1138983 

avatar_url:https://avatars.Eithubusercontent.com/u/11389933v=3 
gravatar_id: 

url:https://api.github.com/users/musicpop 
html_url:https://github.com/musicpop 

followers_url: ://api.github.com/users/musicpop/followers 
following_url:https://api.github.com/users/musicpop/following{/other_user} 














图 7-4 ”jsonp 示例 


在 $.ajax0 方 法 的 参数 中 ，jsonp 用 来 指定 一 个 名 称 ， 禾 盖 默 认 的 参数 名 callback， 
jsonpCallback 指定 jsonp 回调 函数 名 。 例 如 : 


<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8" /> 

<script src="https://code.jQuery.com/jQuery-2.1.1.js"></script> 


<script> 
jQuery (document) .ready (function(){ 
$.ajax({ 
type: "get", 
async:true, 
url: "https://api.github.com/users/musicpop?callback=?", 
dataType: "jsonp", 
// 传 递 给 请 求 处 理 程序 或 页 面 , 用 以 获得 jsonp 回调 函数 名 的 参数 名 (默认 为 :callback) 
jsonp: "callbackparam", 
// 自 定义 的 jsonp 回调 函数 名 称 ， 默 认为 jQuery 自动 生成 的 随机 函数 名 
jsonpCallback:"success_ jsonpCallback", 
success: function(result){ 
console.log (result); 
for(var i in result.data) { 
console.log(i+":"+result.data[i]); 
} 
}, 
error:function(){ 
alert ('fail'); 
} 
3 
}); 
</script> 
</head> 


</html> 
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使 用 $.ajax( 方 法 显然 增加 了 编码 的 工作 量 ， 可 是 却 带 来 了 更 大 的 灵活 性 。 避 免 浏 览 器 组 








存 来 








服务 器 的 响应 。 非 常 适合 服务 器 动态 生成 数据 。 可 以 注册 独立 的 回调 函数 ， 制 止 正常 


情况 下 所 有 Ajax 交互 中 的 全 局 事件 .在 远程 主机 需要 认证 的 情况 下 , 可 以 提供 用 户 名 和 密码 。 
虽然 使 用 Ajax 有 诸多 好 处 ， 但 是 使 用 Ajax 时 应 该 遵循 一 定 的 原则 : 


7.4.2 











尽量 减少 通信 量 : Ajax 应 用 程序 向 服务 器 发 送 的 信息 量 及 从 服务 器 接收 的 信息 量 应 
尽 可 能 地 少 。 简 单 地 说 ，Ajax 应 尽量 减少 客户 端 和 服务 器 之 间 的 通信 流量 。 

确保 Ajax 应 用 程序 不 发 送 和 接收 不 需要 的 信息 。 

不 管 选择 什么 样 的 用 户 交 互 模型 ， 一 定 要 确保 用 户 知 道 下 一 步 该 如 何 操作 。 

不 需要 在 使 用 新 的 交互 模型 上 浪费 时 间 ， 直 接 参 考 传统 的 Web 应 用 程序 和 桌面 应 用 
程序 ， 这 样 可 以 使 用 户 学 习 更 快捷 。 

避免 下 载 整个 页 面 : 当 最 初 的 页 面 下 载 之 后 ， 所 有 与 服务 器 的 通信 都 将 由 Ajax 引擎 


管理 。 


$.ajax() 全 局 事件 








在 使 用 $.ajax0 方 法 时 可 以 注册 回调 函数 ， 包 括 beforeSend、success、error、complete， 我 
们 称 这 些 事 件 为 局 部 事件 。 jQuery 还 提供 了 全 局 的 Ajax 事件 ， 全 局 事件 可 以 绑 定 到 DOM 元 


这 样 我 们 就 可 以 通过 改变 DOM 元 素来 跟踪 请 求 进展 的 状态 。 全 局 事件 在 被 触发 后 会 


广播 到 document 元 素 上 ， 从 jQuery1.8 以 后 , 全 局 事件 只 能 绑 定 在 document 对 象 上 。 当 执行 
函数 时 上 下 文 被 设置 为 在 其 上 创建 处 理 器 的 document 对 象 。 全 局 事件 如 表 7-15 所 示 。 


表 7-15 Ajax 全 局 事件 





事件 名 称 参数 功能 描述 
.ajaxSuccess() Callback 当 Ajax 请 求 成 功 时 显示 一 条 消息 
当 Ajax 请 求 完成 且 出 现 错误 时 注册 要 调 

.ajaxErrorO Callback 用 的 处 理 程序 
.ajaxStartO Callback 当 首 个 Ajax 请 求 开 始 时 执行 函数 
.ajaxStopO Callback 当 所 有 Ajax 请 求 完 成 时 执行 函数 
.ajaxSendO Callback 在 一 个 Ajax 请 求 发 送 之 前 执行 
.ajaxComplete() Callback 当 一 个 Ajax 请 求 完 成 时 执行 

例如 : 

<body> 


<b>Projects:</b> 


<ol id="new-projects"></ol1> 
<button> 改 变 内 容 </button> 
<script> 


$ (document) .ready (function(){ 


$ (document) .ajaxSend (function(){ 

$ ("body") .append ("<img src="'loading.gif" />"); 
1)3 
$ ("button") .click (function(){ 
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$( "#new-projects" ).load( "./loadResourse.html #projects 1i™ ); 
$( "#new-projects" ).load( "./loadResourse.html #projects 1i™ ); 
$( "#new-projects" ).load( "./loadResourse.html #projects 1i™ ); 


}); 
]) 7 
</script> 


当 上 面 的 代码 在 运行 时 点 击 按钮 后 ， 会 在 页 面 底部 增加 三 个 正在 加 载 的 图 片 ， 如 图 7-5 
所 示 。 





Projects: 


。 jQuery 
。 jQuery UI 
。 jQuery Mobile 
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图 7-5 ajaxSend 示例 


ajaxStart 与 ajaxSend 的 区 别 是 : 当 一 起 执行 多 个 Ajax 请 求 时 ajaxStart 只 会 执行 一 次 , 也 
就 是 当 一 个 Ajax 请 求 开始 时 ， 如 果 其 他 Ajax 请 求 处 于 激活 状态 ， 则 不 会 触发 ajaxStart 事件 。 
而 ajaxSend 在 每 一 个 Ajax 请 求 开始 之 前 都 会 触发 。 例 如 : 


<body> 
<b>Projects:</b> 
<ol id="new-projects"></o0l1> 
<button> 改 变 内 容 </button> 
<script> 
$ (document) .ready (function(){ 
$ (document) .ajaxStart (function(){ 
$ ("body") .append ("<img src='loading.gif' />"); 
]) 7 
$ ("button") .click (function(){ 
$( "#new-projects" ).load( "./loadResourse.htm]l #projects 1i"™ ); 
$( "#new-projects" ).load( "./loadResourse.html #projects 1i"™ ); 
$( "#new-projects" ).load( "./loadResourse.htm]l #projects 1i"™ ); 
}); 
}); 
</script> 


当 上 面 的 代码 在 运行 时 点 击 按钮 后 ， 会 在 页 面 底部 增加 一 个 正在 加 载 的 图 片 ， 如 图 7-6 
所 示 。 
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Projects: 


1. jQuery 
2. jQuery UI 
3. jQuery Mobile 
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图 7-6 ajaxStart 示例 


7.4.3 $.ajax() 全 局 设 定 


使 用 ajaxSetup0 方 法 可 以 设置 Ajax 请 求 的 一 些 全 局 性 选项 值 , 设置 完成 后 , 后 面 的 Ajax 





请 求 将 不 需要 再 设置 这 些 选项 值 ， 它 的 语法 为 : 











$.ajaxSetup ([options]) 


可 选项 options 参数 为 一 个 对 象 ， 通 过 该 对 象 设 置 Ajax 请 求 的 全 局 选项 值 。 这 样 就 不 需 


要 对 每 个 $.ajax0 方 法 都 设置 它 的 细节 ， 当 页 面 中 多 个 地 方 都 利用 $.ajax0 方 法 进行 通信 时 ， 使 
用 ajaxSetup0 方 法 简化 代码 结构 。 例 如 : 


<body> 
<button id="btn1"> 加 载 1</button> 
<button id="btn2"> 加 载 2</button> 
</body> 
<script> 
$ (document) .ready (function() { 
$.ajaxSetup ({ 
dataType: 'json', 
success:function(data){ 
var items = []; 
$.each( data, function( key, val ) { 
items.push( "<li id='" + key + "'>" + val + "</1i>" ); 
D); 
FL | 
html: items.join( "" ) 
}) .appendTo( "body™" ); 
} 
}) 
$("#btn1") .click(function (event) { 
$.ajax({url:"https://api.github.com/users/musicpop"}); 
DBs 
$("#btn2") .click (function(event) { 
$.ajax({url:"https://api.github.com/users/jrburke"}); 
]) 
有 要 
</script> 


上 面 的 例子 中 ， 两 个 按钮 都 可 以 异步 加 载 数 据 ， 并 使 用 了 相同 的 ajax 设置 。 
在 页 面 初始 化 的 时 候 $.ajaxSetup0 方 法 只 会 运行 一 次 ， 全 局 设 定 不 能 设置 load0 方 法 的 相 
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关 操 作 ， 也 不 能 改变 $.post0 方 法 采用 POST 方式 发 送 数据 。 

Ajax 是 浏览 器 技术 发 展 的 成 果 ， 通 过 在 浏览 器 端 发 送 异 步 请 求 ， 提 高 了 单 用 户 操作 的 响 
应 性 。 但 Web 本 质 上 是 一 个 多 用 户 的 系统 ， 对 任何 用 户 来 说 ， 可 以 认为 服务 器 是 另外 一 个 用 
户 。 现 有 Ajax 技术 的 发 展 并 不 能 解决 在 一 个 多 用 户 的 Web 应 用 中 ， 将 更 新 的 信息 实时 传送 
给 客户 端 ， 从 而 用 户 可 能 在 “过 时 ”的 信息 下 进行 操作 。 而 Ajax 的 应 用 又 使 后 台数 据 更 新 更 
加 频繁 成 为 可 能 。Ajax 的 一 个 最 大 优点 是 可 以 实现 实时 页 面 更 新 。 但 是 ， 实 时 更 新 如 果 被 误 
用 ， 可 能 会 成 为 应 用 程序 的 严重 威胁 。 假 设 某 个 用 户 显示 了 一 个 活动 页 面 ， 此 页 面 每 隔 几 秒 
钟 轮 询 一 次 服务 器 以 更 新 一 些 内 容 。 如 果 该 用 户 离开 几 个 小 时 ， 但 没有 关闭 浏览 器 ， 这 样 做 
产生 的 结果 是 ， 页 面 不 断 发 送 请 求 ， 给 服务 器 带 来 大 量 (而 且 无 用 ) 的 工作 负荷 。 

于 是 有 了 许多 对 “服务 器 推 ”技术 的 需求 ， 一 些 技 术 专家 称 这 种 基于 HTTP 长 连接 、 
无 须 在 浏览 器 端 安装 插件 的 “服务 器 推 ” 为 Comet。 目 前 已 经 出 现 了 一 些 成 熟 的 Comet 应 用 
以 及 开源 框架 ， 一 些 Web 服务 器 如 Jetty 也 为 支持 大 量 并 发 的 长 连接 进行 了 很 多 改进 。 

所 谓 长 连接 ， 就 是 要 在 客户 端 与 服务 器 之 间 创 建 和 保持 稳定 可 靠 的 连接 。 其 实 它 是 一 种 
很 早 就 存在 的 技术 ， 但 是 由 于 浏览 器 技术 的 发 展 比较 缓慢 ， 没 有 为 这 种 机 制 的 实现 提供 很 好 
的 支持 。 所 以 要 达到 这 种 效果 ， 需 要 客户 端 和 服务 器 的 程序 共同 配合 来 完成 。 通 常 的 做 法 是 ， 
在 服务 器 的 程序 中 加 入 一 个 无 限 循环 ， 在 循环 中 监测 数据 的 变动 。 当 发 现 新 数据 时 ， 立 即将 
其 输出 给 浏览 器 并 断 开 连接 ， 浏 览 器 在 收 到 数据 后 ， 再 次 发 起 请 求 以 进入 下 一 个 周期 ， 这 就 
是 常 说 的 长 轮 询 (long-polling) 方 式 。 

如 图 7-7 所 示 ， 它 通常 包含 以 下 几 个 关键 过 程 。 








等 待 直到 有 数据 
返回 或 者 超时 





图 7-7 长 轮 询 的 几 个 关键 过 程 


当 循环 过 程 中 服务 器 向 浏览 器 推送 信息 后 ， 应 该 主动 结束 程序 运行 从 而 让 连接 断 开 ， 这 
样 浏览 器 才能 及 时 收 到 数据 并 发 起 新 的 请 求 。 当 没有 新 数据 推送 时 , 循环 不 能 一 直 持续 下 去 ， 
应 该 设 定 一 个 最 长 时 限 ， 避免 Web 服务 器 超时 (Timeoub。 若 一 直 没 有 新 信息 ， 服 务 器 应 主动 
向 浏览 器 发 送 本 次 轮 询 无 新 信息 的 正常 响应 ， 并 断 开 连接 。 当 出 现 网 络 故 障 或 异常 造成 的 请 
求 超时 或 出 错时 ， 也 可 能 导致 轮 询 的 意外 中 断 ， 此 时 浏览 器 将 收 到 错误 信息 。 

使 用 jQuery 可 以 实现 长 连接 ， 代 码 如 下 : 

<!DOCTYPE html> 

<html> 


<head> 
<meta charset="utf-8" /> 





第 7 章 基于 jQuery 的 Ajax 技术 *207* 








<script src="rrwb/scripts/jQuery-2.1.1.j]s"></script> 
<script> 
function fetch() { 
$.ajax({ 
url: 'http://localhost:8080/rrwb/crud/longpolling', 
async: true, 
type: 'get', 
data:{"timed": new Date () .getTime () }， 
success: function(ret, textStatus, jqXHR) { 
$('#main') .append('<p>' + ret + '</p>"'); 
fetch(); 
}, 
error: function(jqXHR, textStatus, errorThrown) { 
setTimeout (fetch, 5000); 
}, 
timeout:4000 
Bs 
} 
$ (function(){ 
fetch(); 
]) 7 
</script> 
</head> 
<body> 
<div id="main"></div> 
</body> 
</html> 


服务 器 端的 代码 为 : 


public void doPost (HttpServletRequest req, HttpServletResponse res) 
throws IOException, ServletException 


long timed = Long.parseLong (req.getParameter ("timed")); 
PrintWriter writer = res.getWriter(); 
Random rand = new Random(); 
try { 
// 循环 查询 有 无 数据 变化 
while (true) { 
Thread.sleep (200) ; // 休眠 300 毫秒 ， 模 拟 处 理 业务 等 
int i = rand.nextInt (100); // 产生 一 个 0-100 之 间 的 随机 数 
if (i > 20 g&& i < 55) { 
// 如 果 随 机 数 在 20-55 之 间 就 视 为 有 效 数据 ， 模 拟 数 据 发 生变 化 
long responseTime = System.currentTimeMil]lis(); 
// 返回 数据 信息 ， 请 求 时 间 、 返 回 数据 时 间 、 耗 时 
wIiter-print("{result: "+i+", response time: "+ 
responseTime + ", request time: " + timed + ", use 
time:" + (responseTime - timed)+"}"); 
break; // 跳出 循环 ， 返 回 数据 
} else { // 模拟 没有 数据 变化 ， 将 休眠 保持 连接 
Thread.sleep(1300); 
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} catch (Exception e) {} 
} 


在 服务 器 端 模拟 数据 发 生变 化 ， 并 将 数据 “推送 ”到 客户 端 ， 显 示 效 果 如 图 7-8 所 示 。 


{result: 30, response time: 1427346792627, request time: 1427346790710，use time: 1917} 
{result: 42, response time: 1427346792940, request time: 1427346792630, use time: 310} 
{result: 44, response time: 1427346793251, request time: 1427346792941, use time: 310} 
{result: 37, response tine: 1427346802566, request time: 1427346802258, use time: 308} 
{result: 23, response time: 1427346811883, request time: 1427346811570, use time: 313} 
{result: 48, response time: 1427346822801, request time: 1427346820888, use time: 1913} 


{result: 21, response time: 1427346832135, request time: 1427346831807, use time: 328} 














图 7-8 长 轮 询 示 例 的 显示 效果 


本 章 小 结 


本 章 首先 介绍 了 Ajax 的 原理 。Ajax 不 是 一 种 技术 而 是 几 种 原 有 技术 的 组 合 。Ajax 技术 
比 传统 的 Web 应 用 有 许多 优势 , 但 也 存在 安全 问题 与 客户 端 代码 过 于 复杂 等 问题 。 然 后 讲解 
了 $.get0、$.geUSONO 等 实用 方法 ， 如 果 需 要 最 大 的 灵活 性 ， 那 么 可 以 使 用 带 有 丰富 分 类 选 
项 的 $.ajax0 方 法 。 最 后 介绍 了 jQuery 提供 的 Ajax 全 局 事件 和 Ajax 全 局 设置 函数 。 在 掌握 了 
这 些 令 人 印象 深刻 的 Ajax 实用 函数 后 ， 我 们 在 Web 中 实现 丰富 的 功能 将 会 更 容易 。 


本 章 练习 


1. 什么 是 Ajax? 
2. 请 介绍 一 下 XMLhttprequest 对 象 ? 
3. jQuery 中 关于 Ajax 的 方法 有 哪些 ? 
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jQuery 的 易 扩 展 性 吸引 了 大 量 开 发 者 共同 编写 jQuery 插件 . jQuery 插件 不 仅 能 够 增强 网 
站 的 可 用 性 ， 有 效 地 改善 用 户 体 验 ， 还 可 以 大 大 减少 开发 时 间 。 本 章 将 重点 介绍 几 个 常用 的 
jQuery 插件 。 

本 章 内 容 : 

@ 如 何 创建 jQuery 插件 

e@ 如 何 选择 jQuery 插件 

e@ 掌握 jQuery Image Select 插件 、jQuery templating 插件 

e@ 掌握 jQuery UI 插件 


8.1 jQuery 插件 介绍 


插件 是 实现 了 某 种 软件 接口 的 程序 模块 ， 第 三 方 开发 者 可 以 遵循 该 接口 开发 独立 的 功 
ello den 基于 jQuery 的 插件 已 经 达到 2000 多 个 ，jQuery 
经 远 不 只 是 核心 库 。 这 些 插件 大 都 来 自 jQuery 社区 ， 现 在 jQuery 社区 已 经 成 长 为 一 个 生 
ee 
开发 者 可 使 用 jQuery 插件 来 完成 表单 确认 、 各 类 图 表 、 字段 提示 、 动画 、 进度 条 等 任务 
也 有 一 些 比 较 复杂 的 jQuery 插件 (比如 jQuery UD，jQuery UI 是 一 个 丰富 的 用 户 界面 插件 
提供 了 一 些 常见 的 事件 、 约 定 以 及 视觉 样式 。JQeury 插件 不 仅 可 以 给 我 们 解决 很 多 问题 ， 而 
且 使 用 非常 简单 。 
为 了 让 其 他 人 甚至 自己 重用 自己 编写 的 代码 ， 我 们 会 希望 把 这 些 代 码 打 包 成 一 个 插件 。 
下 面 就 介绍 两 种 创建 插件 的 方法 。 
8.1.1 通过 全 局 函数 创建 插件 


jQuery 提供 的 一 些 功 能 是 通过 全 局 函数 给 出 的 ,例如 $.ajax0 函 数 ，$.ajax0 所 做 的 一 切 都 
可 以 通过 简单 地 调用 一 个 名 为 ajax 的 常规 全 局 函数 来 实现 , 最 简单 的 创建 jQuery 插件 的 方式 
就 是 在 jQuery 命名 空间 (或 者 理解 成 jQuery 自身 ) 上 添加 了 一 个 全 局 方法 。 例 如 : 


jQuery.sayHello = function() { 


居民 素 








console.log("hello"); 
二 
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使 用 的 时 候 就 如 同调 用 jQuery 的 其 他 函数 一 样 : 


$.sayHello() 


jQuery 提供 的 这 个 方法 也 可 以 用 来 扩展 jQuery 对 象 。 如 果 我 们 想 在 插件 中 提供 多 个 全 局 
函数 ， 使 用 $.extend0 方 法 会 更 方便 、 更 加 清晰 ，$.extendO 的 语法 如 下 : 


jQuery.extend (deep, target, objectl,object2,.. objectN) 





表 8-1 给 出 了 S$.extend0 方 法 的 参数 。 


表 8-1 $.extend() 方 法 的 参数 





可 选 。 如 果 设 置 为 tue， 则 递归 合并 








[ 选 。 待 修改 对 象 
待 合并 到 target 的 对 象 





第 1 个 参数 deep 表示 是 否 进行 深度 拷贝 ， 我 们 看 一 个 例子 : 


Var result=$.extend( true, {}, 
{ name: "John", location: {city: "Boston",county:"USA"} }, 
{ last: "Re", location: {state: "MA",county:"China"} } ); 


可 以 看 出 第 1 个 深度 拷贝 参数 为 tue, 第 3 个 参数 中 嵌 套 子 对 象 location: {city:"Boston"}， 
第 4 个 参数 中 也 媒 套 子 对 象 location: {state:"MA"}， 那 么 合并 后 的 结果 就 是 : 


result={name:"John", last:"Re",location: {city:"Boston", state:"MA", 
county:"China"}} 


那么 我 们 可 以 使 用 $.extend0 方 法 扩展 jQuery 的 功能 ,下面 的 代码 演示 了 一 个 包含 两 个 函 
数 的 插件 : 


jQuery.myPlugin = $.extend!( 


{ 
sayHello: function() { 
console.log("hello"); 
}, 
sayHi : function() { 
alert ("hi"); 
} 





我 们 创建 了 另 一 个 命名 空间 jQuerymyPlugin， 使 用 时 实际 上 调用 的 是 myPlugin 属性 上 
的 函数 ， 例 如 : 


$.myPlugin.sayHello(); 
$.myPlugin.sayHi (); 
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8.1.2 通过 $.fn() 方 法 创建 插件 





使 用 全 局 函数 的 方法 无 法 利用 jQuery 强大 的 选择 器 带 来 的 便利 , 要 处 理 DOM 元 素 以 及 








将 插件 更 好 地 运用 于 所 选择 的 元 素 身 上 ， 还 需要 使 用 第 二 种 开发 方式 ， 例 如 : 








$.fn.pluginName = function() { 
console.log("do something in plugin"); 


} 


jQuery 中 的 大 多 数 操作 都 需要 通过 选择 器 得 到 对 象 ， 然 后 再 操作 DOM 元 素 。 而 在 使 用 


上 面 的 方法 创建 的 插件 内 部 ， 关 键 字 this 引用 的 就 是 当前 的 jQuery 对 象 。 因 而 ， 可 以 在 this 
上 面 调用 任何 内 置 的 jQuery 方法 ， 例 如 : 


说 ， 
调 


<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8" /> 

<script src="http://apps.bdimg.com/libs/jQuery/2.1.1/jQuery.js" ></script> 
</head> 


<body> 
<ul> 
<li> 
<a href="http://www.webo.com/"> 我 的 微 博 </a> 
</1i> 
<li> 
<a href="http://www.cnblogs .com/"> 我 的 博客 </a> 
雪人 > 
<1i> 
<a href="http://baidu.com/"> 我 的 小 站 </a> 
</1i> 
</ul> 
<p> 这 是 p 标签 不 是 a 标签 ， 我 不 会 受 影响 </p> 
<script> 


$.fn.myLink = function() { 
// 在 这 里 面 , this 指 的 是 用 jQuery 选中 的 元 素 
this.css('color', 'red'); 
}; 
$ (function(){ 
$('a') .myLink(); 
}) 
</script> 
</body> 
<html> 


$(a) 返 回 的 是 页 面 上 所 有 a 标签 的 集合 ， 且 这 个 集合 已 经 是 jQuery 包装 类 型 了 ,也 就 是 
在 对 其 进行 操作 的 时 候 可 以 直接 调用 jQuery 的 其 他 方法 而 不 需要 再 用 美元 符号 来 包装 。 

















$a).myLink0 后 ， 页 面 上 所 有 链接 的 颜色 会 变 成 红色 。 
如 果 需 要 对 一 个 集合 进行 处 理 ， 我 们 可 以 针对 每 个 元 素 进行 相应 操作 。 比 如 现在 要 在 每 
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个 链接 处 显示 链接 的 真实 地 址 ， 首 先 通过 each 遍历 所 有 a 标签 , 然后 获取 href 属性 的 值 再 加 
到 链接 文本 后 面 。 代 码 如 下 : 


<script> 
$.fn.myLink = function() { 
// 在 这 里 面 , this 指 的 是 用 jQuery 选中 的 元 素 
this.css('color', 'red'); 
this.each (function() { 
// 对 每 个 元 素 进行 操作 
$ (this) .append(' ' + $(this) .attr('href')); 
Ds 


$ (function () { 
$('a') .myLink(); 
}) 
</script> 
我 们 已 经 知道 this 指 代 jQuery 选择 器 返回 的 集合 , 那么 通过 调用 jQuery 的 .each0 方 法 就 
可 以 处 理 集合 中 的 每 个 元 素 了 ， 但 此 刻 要 注意 的 是 ， 在 each 方法 内 部 ，this 指向 的 是 普通 的 
DOM 元 素 ， 如 果 需 要 调用 jQuery 的 方法 ,就 需要 用 $ 来 重新 包装 。 上 面 的 代码 的 运行 效果 如 
图 8-1 所 示 : 





这 是 p 标 签 不 是 a 标签 ， 我 不 会 受 影响 
图 8-1 通过 $.fn0 方 法 创建 插件 


8.1.3 ”让 插件 接收 参数 


稍微 复杂 一 些 的 插件 ， 函 数 的 执行 可 能 依赖 于 用 户 的 输入 。 我 们 把 这 些 用 户 输入 的 值 定 
义 为 参数 ， 比 如 现在 不 想 让 链接 只 变 成 红色 ， 我 们 让 插件 的 使 用 者 自己 定义 显示 什么 颜色 ， 
要 做 到 这 一 点 很 方便 ， 只 需要 使 用 者 在 调用 的 时 候 传 入 一 个 参数 即 可 。 代 码 如 下 : 


<script> 
$.fn.myLink = function(color) { 
// 在 此 处 , this 指 的 是 用 jQuery 选中 的 元 素 
this.css('color', color); 
this.each (function() { 
// 对 每 个 元 素 进行 操作 
$ (this) .append(' ' + $(this) .attr('href')); 
]})] 7 
$ (function(){ 
$('a') .myLink ("#00FF00"); 
}) 
</script> 


随 着 参数 的 增多 ， 参 数 的 次 序 会 让 使 用 者 望而却步 ， 而 且 指定 的 每 个 参数 并 不 是 必 不 可 
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少 的 。 解 决 办 法 就 是 只 在 使 用 者 调用 的 时 候 传 入 一 个 对 象 参数 即 可 ， 所 有 传 入 的 参数 都 设置 
为 这 个 传 入 对 象 的 属性 。 例 如 : 


$.fn.myPlugin = function(options) { 


var defaults = { 
"EOLor 3 "red', 
"fontSize"s "12px" 
}; 


var settings = $.extend(defaults, options); 
return this.css({ 
'color': settings.color, 
'fontSize': settings.fontSize 
1 
: 


同时 为 了 灵活 ， 使 用 者 可 以 不 传递 参数 ， 上 面 的 代码 里 面 会 给 出 参数 的 默认 值 ， 如 果 对 
象 options 中 有 同名 属性 时 , 合并 的 时 候 options 对 象 会 覆盖 前 面 的 defaults 对 象 。 这 样 就 实现 
了 用 户 指定 了 值 的 参数 使 用 指定 的 值 ， 未 指定 值 的 参数 使 用 插件 的 默认 值 。 上 面 的 例子 中 还 
指定 了 另 一 个 参数 fontSize， 人 允许 使 用 插件 的 时 候 设 置 字体 大 小 。 

现在 ， 如 果 我 们 调用 插件 的 时 候 指 定 颜色 ， 字 体 大 小 未 指定 ， 则 会 使 用 插件 里 的 默认 值 
12px。 代 码 如 下 : 





$('a') .myPlugin({ 
'color': '#2C9929' 

1D); 

我 们 知道 调用 extend 时 会 将 defaults 的 值 改变 ， 这 样 会 破坏 插件 的 一 致 性 ， 因 为 它 作为 
插件 有 一 些 东 西 应 该 保持 一 致 ， 另 外 就 是 如 果 在 后 续 代 码 中 还 要 使 用 这 些 默 认 值 的 话 ， 当 我 
们 再 次 访问 它 时 它 已 经 被 用 户 传 进来 的 参数 更 改 了 。 那 么 我 们 可 以 将 一 个 新 的 空 对 象 作为 
S$.extend 方法 的 第 一 个 参数 ，defaults 和 用 户 传递 的 参数 对 象 紧 随 其 后 ， 这 样 做 的 好 处 是 所 有 
值 被 合并 到 这 个 空 对 象 上 ， 保 护 了 插件 里 面 的 默认 值 。 代 码 如 下 : 


var settings = $.extend({},defaults，options);// 将 一 个 空 对 象 作为 第 一 个 参数 


通过 全 局 函数 创建 的 插件 类 似 于 在 jQuery 对 象 上 添加 了 一 个 全 局 方法 , 是 类 级 别 的 。 而 
通过 $.fn( 方 式 创建 的 插件 是 对 象 级 别 的 ， 下 面 是 jQuery. 名 的 源 代码 : 

jQuery.fn = jQuery.prototype = { 

A/ 代码 

} 

可 以 清晰 地 看 出 jQuery.fh 实际 上 是 jQuery 的 原型 对 象 。 而 根据 JavaScript 原型 的 知识 ， 
jQuery.prototype 原型 对 象 上 的 属性 、 方 法 和 事件 ， 将 扩展 到 所 有 基于 该 原型 的 实例 对 象 。 这 
就 是 我 们 建议 使 用 $.fn0 方 式 创建 插件 的 原因 。 

到 这 里 ， 我 们 已 经 可 以 开发 一 个 自己 的 jQuery 插件 了 ， 下 面 给 出 一 些 开发 插件 的 原则 : 

e 为 插件 设置 一 个 适当 的 命名 空间 是 插件 开发 中 非常 重要 的 一 部 分 。 合 理 的 命名 空间 
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可 以 降低 插件 被 另 一 些 插件 或 者 当前 页 面 上 的 代码 覆盖 的 几率 。 命 名 空间 也 可 以 让 
开发 工作 变 得 容易 ， 它 可 以 让 我 们 更 好 地 跟踪 方法 、 事 件 和 数据 。 

用 自 调 用 匿名 函数 包 衷 我 们 的 代码 。 函 数 可 以 形成 一 个 作用 域 ， 域 内 的 代码 是 无 法 
被 外 界 访问 的 。 如 果 我 们 将 自己 的 代码 放 入 一 个 函数 中 ， 那 么 就 不 会 污染 全 局 命名 
空间 ， 同 时 也 不 会 和 别 的 代码 冲突 。 代 码 如 下 : 




















(function() { 
$.fn.myLink = function(color) { 
// 在 这 里 面 , this 指 的 是 用 jQuery 选中 的 元 素 
this.css('color', color); 
this.each(function() { 
// 对 每 个 元 素 进行 操作 
$ (this) .append(' ' + $(this).attr('href')); 
]) }7 
}) () 7 
e 一 个 单独 的 插件 在 jQuery.fh 对 象 上 的 命名 空间 都 不 应 超过 一 个 。 
e 不 要 为 插件 函数 定义 过 多 的 参数 ， 而 是 通过 传递 一 个 可 被 扩展 的 对 象 字面 量 来 传递 
参数 。 


8.2 ”寻找 插件 


当 我 们 开始 jQuery 开发 项 目 时 ， 还 要 决定 是 使 用 插件 来 构建 程序 ， 还 是 什么 都 自己 写 。 
但 大 多 数 情况 下 ， 使 用 其 他 开发 人 员 发 布 的 开源 插件 会 更 好 。 一 方面 是 插件 背后 有 庞大 的 社 
区 支持 ， 另 一 方面 是 会 有 大 量 的 用 户 发 现 其 中 的 bug。 

8.2.1 搜索 jQuery 插件 

jQuery 提供 了 官方 的 插件 网 站 http:/pluginsjQuery.com/， 里 面 圳 括 了 大 量 插件 ， 并 给 出 

了 每 个 插件 的 用 户 评级 、 版 本 及 bug 报告 ， 如 图 8-2 所 示 。 


The jQuery Plugin Registry 


BD Popular Tags The jQuery Plugin Registry isin read-only mode. 
有 New plugin releases will not be processed. 





图 8-2 jQuery 官网 插件 
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通常 一 个 插件 的 品质 越 高 ， 它 的 用 户 评级 也 越 高 。 其 中 每 个 插件 都 提供 zip 文件 下 载 、 
示例 代码 和 教程 的 链接 。 当 然 还 有 其 他 没有 发 布 到 http://pluginsjQuery.com/ 上 的 插件 ， 只 能 
通过 搜索 引擎 或 者 https://github.com/ 来 查找 我 们 想 要 的 插件 。 





8.2.2 选择 jQuery 插件 


寻找 到 好 用 的 jQuery 插件 并 不 容易 ， 因 为 很 多 插件 在 工程 化 上 做 得 比较 差 ， 缺乏 足 
够 的 灵活 性 ， 难 以 融入 我 们 的 项 目 。 那 么 如 何 评估 一 个 插件 是 否 是 品质 优良 的 插件 呢 ? 
如 果 功 能 非常 简单 ， 我 们 应 该 自己 亲手 写 一 个 ， 如 果 插 件 不 能 满足 我 们 的 需求 ， 我 们 可 
以 花 点 精力 扩展 那个 插件 。 插 件 的 学 习 难 度 如 何 ， 首 先 要 看 插件 的 文档 ， 好 的 插件 会 有 
详细 的 说 明文 档 和 示例 教程 。 看 看 插件 最 近 的 更 新 情况 ， 是 否 有 开发 人 员 持 续 稳 定 地 对 
其 进行 维护 。 检 查 插件 是 否 对 HTML 标记 有 依赖 ， 一 些 奇怪 或 严格 的 HTML 标记 会 让 插 
件 非 常 难 用 ， 因 为 我 们 需要 调整 HTML 标记 以 适应 插件 的 具体 要 求 。 如 果 插件 中 的 CSS 
品质 不 好 ， 那 也 表明 开发 者 在 前 端 技 能 上 有 所 欠缺 。 如 果 插 件 提 供 了 单元 测试 ， 那 最 好 
不 过 了 ， 这 样 我 们 可 以 在 希望 的 环境 中 运行 一 下 单元 测试 ， 有 单元 测试 的 插件 表明 插件 
的 质量 比较 好 。 最 后 还 应 该 了 解 下 有 多 个 人 在 使 用 这 个 插件 ， 用 户 的 评级 高 肯定 是 个 不 
错 的 现象 。 

在 人 人 微 博 网 站 ， 上 传 个 人 头像 功能 中 需要 对 图 片 进 行 剪 裁 以 生成 大 小 为 100*100 的 头 
像 缩 略图 ， 我 们 使 用 jQuery Image Select 插件 来 实现 。 在 微 博 列表 功能 中 ， 每 一 篇 微 博 都 会 
使 用 相同 的 HTML 和 CSS 模板 ， 我 们 使 用 jQuery templating 插件 来 实现 。 





8.3 ”jQuery ImageArea Select 插件 介绍 


8.3.1 jQuery ImageArea Select 下 载 及 安装 


jQuery ImageArea Select 是 一 个 允许 用 户 使 用 简单 、 直 观 的 点 击 、 拖 动 界面 图 像 选 择 矩 形 
区 域 的 jQuery 插件 。 该 插件 可 用 于 Web 应 用 程序 中 轻松 实现 图 像 裁 前 功能、 照片 标记 功能 、 
图 像 编辑 功能 等 。 官 方 网 站 为 http://odyniec.net/projects/imgareaselect/， 官 网 上 提供 了 在 线 示 
例 和 对 各 个 浏览 器 的 支持 情况 ， 如 图 8-3 所 示 。 
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odyniec.net/projects/imgareaselect/ 
ET 
Supports callbac 


。 Provides APIfunctions for easier integration er appication components Fa 
» Lightweight 一 the packed version isjust 8KB 
The plugin works in all malor browsers including Firefox 2+, Opera 9.5+, Google Chrome, Safari 3+, and 


图 Documentation 
FAQ 











Live Example 
ek and drag on the iaage to select mp aret Selection Preview 
Coordinates Dimensions 
Xr: 可 Width: 1 本 
Ys 加 Height: 1 后 
X2: 19| 
Ya: 224 











图 8-3 jQuery ImageArea Select 插件 


8.3.2 使 用 jQuery ImageArea Select 
我 们 可 以 在 $(document).ready( 或 $(window).load0 事件 处 理 程序 中 初始 化 插件 。 例 如: 


$ (document) .ready (function () { 
$ ('img#photo') .imgAreaSelect ({ 
handles: true, 

onSelectEnd: someFunction 

}) 7 

1D); 


传递 给 插件 的 可 选 参数 对 象 如 表 8-2 所 示 。 


表 8-2 imgAreaSelect 方法 的 参数 





























参数 名 描述 
aspectRatio 设 定 选取 区 域 的 显示 比率 ， 如 4:3 
autoHide false 如 果 设 置 为 tue， 则 当选 择 区 域 选 择 结束 时 消失 
classPrefix i imgareaselect | 这 是 一 个 字符 串 ， 表 示 插 件 样式 的 类 名 加 前 级 
disable 如 果 设 置 为 tue， 禁 用 插件 
enable 如 果 设 置 为 tue， 插 件 被 重新 启用 
如 果 设置 为 大 于 零 的 数字 ， 则 用 优美 的 淡 入 /淡出 动画 来 显 
fadeSpeed M 
示 图 片 
Far 如 果 设 置 为 tue， 调 整 手柄 则 会 显示 在 选择 区 域内 ， 如 果 
设置 为 comers， 则 只 有 角 处 理会 显示 调整 手柄 
hide 如 果 设 置 为 tue， 选 择 范 围 是 隐藏 
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参数 名 | 数据 类 型 | 默认 值 描述 
imageHeight | number 
imageWidth Dumber 








图 片 的 真实 宽度 

如 果 设 置 为 tue，imgAreaSelect0 调 用 返回 一 个 imgAreaSelect 
绑 定 到 的 图 像 的 实例 ， 使 我 们 可 以 使 用 它 的 API 方法 
keys boolean false 启用 /禁用 键盘 支持 ， 默 认 值 为 false 

选取 的 最 大 高 度 (单位 为 像素 ) 

选取 的 最 大 宽度 (单位 为 像素 ) 

选取 的 最 小 高 度 (单位 为 像素 ) 

选取 的 最 小 宽度 (单位 为 像素 ) 





instance Dumber 

















maxHeight number 





maxWidth number 
minHeight number 
minWidth number 











movable boolean 确定 选取 是 否 可 以 移动 

parent string -个 jQuery 对 象 或 选择 字符 串 ， 指 定 被 追加 到 父 元 素 
如 果 设 置 为 tue， 选 择 区 域 以 外 的 点 击 将 不 会 启动 一 个 新 

persistent boolean false 的 选区 ( 即 用 户 只 能 移动 /调整 现 有 的 选择 范围 )， 默 认 值 为 
false 

Tesizable boolean 确定 是 否 选择 面积 应 可 调整 大 小 

show boolean 如 果 设 置 为 tue， 选区 则 会 显示 

最 初 选择 区 域 的 左上 角 举 标 

22 

最 初 选择 区 域 的 右上 角 坐 标 


- 般 情 况 下 ， 在 选区 选择 完毕 后 ， 根 据 选择 的 大 小 和 位 置 处 理 成 我 们 想得到 的 结果 就 可 
以 了 。 提 供 的 onSelectEnd 事件 函数 就 是 最 常用 的 回调 函数 ， 例 如 : 
$('img#photo') .imgAreaSelect ({ 


onSelectEnd: function (img, selection) { 
alert ('width: ' + selection.width + '; height: ' + selection.height); 


} 
}); 


第 一 个 参数 是 插件 所 附加 到 的 图 像 的 引用 ， 第 二 参数 是 表示 当前 选 定 内 容 的 对 象 ， 该 对 
象 有 6 个 属性 : x1、 yl 表示 所 选区 域 的 左上 角 的 坐标 ; x2、y2 表示 所 选 定 区 域 右 下 角 的 坐标 ; 
width 表示 选择 宽度 ; height 表示 选择 高 度 。 除 了 onSelectEnd 回调 函数 ， 还 有 onInit、 
onSelectStart、onSelectChange 回调 函数 ， 它 们 都 具有 相同 的 参数 。 

下 面 我 们 来 实现 头像 缩 略 图 功能 ， 将 使 用 jQuery ImageArea Select 插件 选择 区 域 图 并 上 
传 到 服务 端 。 在 第 2 章 最 后 我 们 完成 了 个 人 信息 页 面 的 表单 设计 ， 在 此 基础 上 完成 头像 缩 略 
图 功能 。 
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HTMLS5 代码 为 : 


<div id="midleft2"> 头 像 : </div> 


<div id="uploader"> 
<form name="" id="uploadForm" method="post" enctype="multipart/form-data" > 
<div> 


<input name="photo" id="file" size="27" type="file" multiple= 
"multiple" accept="image/gif, image/jpeg,image/x-png" form= 
"uploadForm" /> 
<input id = "upload but" name="upload but" value=" 上传" type= "submit" 
form="uploadForm"/> 
<input type="hidden" id="yl" class="yl" name="y1" form="uploadForm"/> 
<input type="hidden" id="xl" class="xl" name="xl1l" form="uploadForm"/> 





<input type="hidden" id="y2" class="y2" name="y2" form="uploadForm"/> 
<input type="hidden" id="x2" class="x2" name="x2" form="uploadForm"/> 
</div> 
</br> 
<div id="div big view" > 
<img id="big view" src="" form="infoForm"/> 
</div> 
</form> 
</div> 


<!-- 缩 略图 区 域 --> 


<div id="div preview" > 





<img id="crop preview" src="" form="infoForm"/> 


</div> 


JavaScript 代码 为 : 


// 建 立 一 个 可 存 取 到 该 file 的 url 
function getObjectURL (file) { 
var url = null ; 
if (window.createObjectURL!=undefined) { // basic 
url = window.createObjectURL (file) ; 
} else if (window.URL!=undefined) { // mozilla (firefox) 
url = window.URL.createObjectURL (file) ; 
} else if (window.webkitURL!=undefined) { // webkit or chrome 
url = window.webkitURL.createObjectURL (file) ; 
} 
return Url ; 


} 


// 选 择 图 片区 域 后 回调 函数 
function Preview(img，selection) { 
if (!selection.width || !selection.height) 
return; 
// 缩 略图 的 大 小 为 100px 


var scaleX = 100 / selection.width; 
var scaleY = 100 / selection.height; 


$('#crop preview') .css({ 
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// 大 图 大 小 为 300px 
width: Math.round(scaleX * 300) ， 
height: Math.round(scaleY * 300), 
marginLeft: -Math.round(scaleX * selection.x1), 
marginTop: -Math.round(scaleY * selection.y1) 
]) 7 
// 设 置 数据 值 
$('#x1') .val (selection.x1); 
$('#y1') .val (selection.y1); 
$('#x2') .val (selection.x2); 
$('#y2') .val (selection.y2); 
} 
$ (document) .ready (function() { 
/ /选择 图 片 后 触发 
$ ("#file") .change (function (){ 
var objUrl = getObjectURL (this.files[0]) ; 
console.1log("objUrl = "+objUrl) ; 
if (objUrl) { 
$("#big view") .attr("src"，objUr1l) ; 
$("#crop preview") .attr("src", objUrl) ; 
} 
1 
// 使 用 插件 并 绑 定 回调 函数 
$('#big view') .imgAreaSelect ({ aspectRatio: '1:1', handles: true, 
fadeSpeed: 200, onSelectChange: preview }); 
1D); 


现在 页 面 效果 就 做 好 了 ， 上 传 图 片 后 ， 可 以 将 选区 以 100*100 像素 大 小 的 缩 略 图 显示 。 
最 后 还 应 该 把 缩 略 图 上 传 到 服务 器 保存 起 来 。 服 务 器 端 提 供 的 上 传 图 片 的 API 为 : 上 传 头像 
缩 略 图 功能 API。 

上 传 头像 缩 略 图 功能 API 


接口 说 明 : 上 传 头像 缩 略 图 

URL: http://localhost:8080/rrwb/crud/uploadServlet 
HTTP 请 求 方 式 : POST/GET 

enctype: multipart/form-data 

请 求 参数 如 表 8-3 所 示 。 


表 8-3 请求 参数 





参数 名 称 
xl 
上 角 坐 标 
X2 
上 有 角 坐 标 














上 传 图 片 的 form 表单 中 ，enctype 属性 设置 为 "multipart/form-data"， 以 二 进 制 格式 上 传 
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图 片 。 
响应 参数 如 表 8-4 所 示 。 
表 8-4 ”响应 参数 
参数 名 称 说 ”了 明 
0: 插入 失败 
oe 1: 插入 成 功 
ul 返回 的 头像 缩 略 图 的 url 地 址 
实现 上 传 头 像 缩 略 图 的 JavaScript 代码 为 : 
$("#uploadForm") .submit (function (e) { 
e.preventDefault (); 
if (window.FormData !== undefined) // for HTML5 browsers 


{ 
var formData = new FormData (this); 
$.ajax({ 
url: 'http://localhost:8080/rrwb/crud/uploadServlet', 
type: 'POST', 
mimeType: "multipart/form-data", 
data:formData, 
contentType: false, 
cache: false, 
processData:false 
}) 
.done (function(data) { 
console.log (data); 
Var response = $.parseJSON (data); 
if (response.code == 1){ 
$("#crop preview") .removeAttr ("style") 
$("#crop preview") .attr ("src", response.url) ; 
alert ("上 传 成 功 ! "); 
} 
}) 
} 
else //for olden browsers 
{ 
alert (' 浏 览 器 不 支持 HTML5" ) ; 
} 
和 过 


代码 中 使 用 了 FormmData 对 象 ,FormmData 对 象 提供 了 一 种 方法 来 轻松 地 构建 一 组 键 / 值 对 ， 
表示 表单 字段 及 其 值 ， 除 了 普通 的 字符 串 类 型 ， 它 的 值 还 可 以 是 Blob 对 象 或 File 对 象 ， 然 后 
可 以 使 用 XMLHttpRequest 的 send0 方 法 以 “multipartform-data ”的 格式 发 送 数据 。 使 用 
FormData 对 象 ， 就 可 以 在 异步 请 求 中 发 送 选择 的 文件 。 





























第 8 章 jQuery 插件 。221。 








8.4 jQuery templating 插件 介绍 


8.4.1 jQuery templating 下 载 及 安装 


随 着 前 端 交互 的 复杂 性 不 变 提升 ， 无 刷新 页 面 数 据 传输 与 演 染 越发 地 频繁 ,我 们 发 现 传 
统 的 前 端 开发 方式 在 Ajax 数据 演 染 等 方面 存在 一 个 主要 问题 : 繁琐 的 数据 演 染 。 当 前 端 从 后 
台 通 过 Ajax 等 方式 获取 数据 后 ， 如 果 要 将 这 个 数据 演 染 到 指定 的 dom 元 素 中 ， 则 需要 进行 
各 种 字符 串 拼 接 、 字 符 串 替换 工作 。 例 如 入 人 微 博 网 站 中 根据 昵称 查找 好 友 的 功能 中 ， 前 端 
需要 循环 处 理 Ajax 方式 获取 的 数据 ， 并 创建 许多 类 似 的 元 素 插入 到 DOM 中 ， 当 访问 
http://localhost:8080/rrwb/guangchang.html? id=16&nick name=zhang 时 ， 效 果 如 图 8-4 所 示 。 





你 011X 发 现 更 今 目 己 硫 兴 起 的 东 四 ， 


-请 Fr zhangsan 


图 8-4 好 友 广场 





HTMLS 代码 如 下 : 


<div id="main"> 
<!-- 广 场 标题--> 
<div id="more"> 
<img src="images/img44.png" /> 
</div> 
<!--/ 广 场 标题 --> 
<!-- 好 友 列 表 --> 
<div id="content"> 
</div> 
<!-- 好 友 列 表 结束 --> 


</div> 


JavaScript 代码 如 下 : 


<script type="text/javascript"> 
Var template = '<div id="content"><div id="tu2"><a href="friend.html? 
fans id="'+getWindowParam(" id")+"&followed id={_ id}">{nick name}<br /> 
<img src="{img}" border="0"></a></div> "7 
$ (document) .ready (function() { 
$.ajax({ 
url: 'http://localhost:8080/rrwb/crud/user/findUserLikeNickName', 
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type: "POST'， 
dataType: 'json', 
data: {nick name: getWindowParam("nick name"),my id: getWindowParam(" id")} 
} 
.done (function (response) { 
if(response.code == "1"){ 
if (response.data.length>0){ 
$.each (response.data, function (i,item) { 
var str = substitute (template, item); 
$ (str) .appendTo($ ('#content')); 
} 


只 
]) 7 


/* * 
* 获 取 地 址 栏 参数 


function getWindowParam(name){ 
if (name= (new RegExp(' [?&] '+encodeURIComponent (name)+'=([^&]*)')) .exec 

(Location.search) ) 
return decodeURIComponent (name [1]); 

} 

/** 

* 替换 字符 串 中 的 字段 

* @param {String} str 模板 字符 串 

* @param {Object} o json data 

* @param {RegExp} [regexp] 匹配 字符 串 的 正则 表达 式 


二 不 
function substitute (str,o,regexp){ 
return str.replace (regexp || /\{([^{}]+)\}/g, function (match, name) { 
return (o [name] === undefined) ? '' : o[name]; 
]) 7 
} 
</script> 








这 里 使 用 字符 串 拼接 创建 了 一 个 模板 , 在 得 到 数据 后 使 用 substitute 函数 替换 大 括号 中 的 
动态 数据 。 这 种 方式 是 繁琐 且 费 时 的 ， 在 需要 修改 模板 时 ， 都 需要 重新 花费 不 少时 间 与 精力 。 
那 有 什么 方法 可 以 解决 这 个 问题 呢 ? 于 是 就 出 现 了 js 模板 ,js 模板 引擎 越 来 越 多 地 得 到 应 用 ， 
如 今 已 经 出 现 了 几 十 种 js 模板 引擎 ， 国 内 各 大 互联 网 公司 也 都 开发 了 自己 的 js 模板 引擎 。 模 
板 的 工作 原理 可 以 简单 地 分 成 两 个 步骤 : 模板 解析 (翻译 ) 和 数据 演 染 。 当 我 们 在 JSP 中 
写 <ul><li><%=name%></li><hul> 的 时 候 ， 其 实 就 是 在 应 用 模板 ， 在 后 台 这 人 句 话 会 被 转换 成 
out.print("<ul><li>"+name+"</li></ul>")。 模板 的 数据 泻 染 就 是 把 模板 中 的 占 位 符 (这 里 是 name) 
替换 成 传 入 的 值 。 有 的 模板 是 依赖 于 jQuery, 而 有 的 模板 是 独立 于 jQuery 的 .下面 介绍 jQuery 
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的 一 个 模板 插件 一 一 Query templating。 

jQuery templating 是 一 个 旨 在 简化 模板 操作 的 jQuery 插件 , 它 支持 加 载 外 部 的 HIML 模 
板 或 者 使 用 jQuery 模板 对 象 。 它 的 语法 简洁 明了 ， 使 用 HIMLS 的 自 定义 属性 绑 定数 据 ， 还 
能 够 自动 把 数据 转化 为 自己 希望 的 格式 。 例 如 下 面 的 模板 : 


<script type="text/html" id="template"> 
<div data-content="author"></div> 
<div data-content="date"></div> 
<img data-src="authorPicture" data-alt="author"/> 
<div data-content="post"></div> 
</script> 
$("#template-container") .loadTemplate( 
$ ("#template"), 
| 
author: "Joe Bloggs', 
date: "25th May 2013', 
authorPicture: 'Authors/JoeBloggs.jpg', 
post: 'This is the contents of my post' 
和 


上 面 的 代码 在 script 标签 中 定义 了 一 个 模板 , 并 指定 id 为 template。 在 目标 元 素 template- 
container 上 使 用 模板 和 数据 ， 这 样 就 可 以 演 染 模板 并 插入 到 目标 元 素 中 。 运 行 效果 如 图 8-5 
所 示 。 





140x140 140x140 
Joe Bloggs Joe Bloggs 
25th NMay 2013 25th Nay 2013 
THIS IS THE THIS IS THE 
CONTENTS OF MY CONTENTS OF MY 
POST POST 





图 8-5 loadTemplate 方法 


我 们 还 可 以 把 模板 保存 在 外 部 的 HIML 文件 中 ， 使 用 方法 如 下 : 


$("#template-container") .loadTemplate( 
"Templates/template.html", 
{ 
author: 'Joe Bloggs', 
date: "25th May 2013', 
authorPicture: 'Authors/JoeBloggs.jpg', 
post: "This is the contents of my post" 


[ey 
已 
Pg 
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不 同 的 元 素 通过 “data-* ”属性 绑 定 不 同 的 数据 ， 如 表 8-5 所 示 。 


表 8-5 jQuery templating 绑 定 数据 参数 





属性 说 明 
data-content 绑 定 数据 到 元 素 的 内 容 ， 等 价 于 $(elem)html(value) 





data-content-append 追加 数据 到 元 素 内 容 的 最 后 位 置 ， 等 价 于 $(elem).append(value) 














data-content-prepend 追加 数据 到 元 素 内 容 的 开始 位 置 ， 等 价 于 S$(elem).prepend(value) 
data-id 设置 元 素 的 id 值 ， 等 价 于 $(elem).attr("id", value) 

data-href 等 价 于 $(elem).attr("href"', value) 

data-value S$(elem).val(value) 

data-link 把 给 定 的 值 包装 为 链接 

data-options 设置 下 拉 选 择 框 的 选项 ， 要 求 值 为 字符 串 数组 

data-format 设置 数据 格式 处 理 器 





使 用 数据 格式 处 理 器 之 前 需要 先 添加 数据 格式 处 理 函数 ， 代 码 如 下 : 


$.addTemplateFormatter ({ 
UpperCaseFormatter : function(value, template) { 
return value.toUpperCase (); 
}, 
LowerCaseFormatter : function(value, template) { 
return value.toLowerCase(); 
}, 


SameCaseFormatter : function(value, template) { 


if(template == "upper") { 
return value.toUpperCase (); 
} else { 


return value .toLowerCase (); 


} 
]) 7 
绑 定数 据 时 ， 指 定数 据 格式 处 理 属性 的 代码 如 下 


<div data-content="" data-format="SameCaseFormatter" data-format-options= 
"upper"></div> 


loadTemplate 还 可 以 通过 第 三 个 参数 (options) 指 定 自 定义 的 选项 ， 见 表 8-6。 


表 8-6 loadTemplate 方法 的 options 参数 








参数 说 明 
overwriteCache 默认 为 false。 是 否 重新 加 载 模板 
success, 成 功 完 成 后 的 回调 函数 
error 错误 处 理 回 调 函 数 
paged 默认 值 false 








pageNo 指定 当前 显示 第 几 页 














( 续 表 ) 
参数 说 ”了 明 
elemPerPage 每 页 的 行 数 
append 默认 为 false。 是 否 追 加 到 元 素 内 容 的 尾部 
repend 默认 为 flse。 是 否 追 加 到 元 素 内 容 的 头 部 





8.4.2 使 用 jQuery templating 
在 人 人 微 博 网 站 中 ， 微 博 列 表 是 根据 服务 器 端 获 取 的 JSON 数据 动态 生成 的 ， 界 面 需求 
如 图 8-6 所 示 。 


11 
4 
我 要 精通 jQuery 我 要 精通 jQuery 我 要 精通 JOuery 我 要 精通 JOuery 我 要 精通 JOuery 
我 要 精通 /Query 我 要 精通 /Query 我 要 精通 jQuery 我 要 精通 JOuery 我 要 精通 /Query 


2015-3-18 8:51-56 


zhangsan 


条 


2015-3-11 1528:58 





图 8-6” 微 博 列表 


实现 代码 如 下 : 


<!-- Template --> 
<script type="text/html" id="template"> 
<div class="cont down41"> 
<div class="cont down4 a"><img data-src="user head img" 
class="picturel" /></div> 
<div class="cont down4 b"> 
<span class="fo" data-content-prepend="user nickName">: </span> 
<span data-content="content"></span> 
<br/> 
<div class="photoBox"> 
<div class="loadingBox"> 
<span class="loading"></span> 
</div> 
<img data-src="img" class="zoom" onclick="zoom image($ (this) .parent ());"/> 
</div> 
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<div class="photoArea" style="display:none;"> 
<img src="" class="minifier" onclick="zoom image($ (this) .parent ());" /> 
</div> 
<div> 
<time data-content="timestamp" data-format="DateTimeFormatter"></time> 
</div> 


</script> 
<script> 
$.addTemplateFormatter ({ 
DateTimeFormatter : function(value, template) { 
Var cTime = new Date (value) 
return cTime.getFullYear()+"-"+(cTime.getMonth()+1)+"-"+cTime .getDate () 
+" "+cTime .getHours ()+":"+cTime .getMinutes ()+":"+cTime.getSeconds (); 
} 
Fs 
//Ajax 访 问 http://localhost:8080/rrwb/crud/weibo/previous_weibos 返回 的 数据 
// 这 里 使 用 模拟 数据 
var weibos =JSON.parse('[{" id":9,"img":"upload/1433464756875 small.jpg", 
"user id":1,"user nickName":"111111", "user head img":"upload/ 
1432713847988_cut_.jpg", "content":"ggg", "status":true, "timestamp": 
1433464761078}, {"_id":8,"img":"upload/1433464739733_small.jpg"," 
user id":1,"user nickName":"111111","user head img":"upload/ 
1432713847988_cut_ .jpg","content":"ffff","status":true, "timestamp": 
1433464748007}, {"_id":7,"img":"upload/1433464557701_small.jpg", 
"user id":1,"user nickName":"111111", "user head img":"upload/ 





1432713847988_cut_ .jpg","content":"eeeee", "status":true, "timestamp" 
1433464564031}]"'); 


// 添 加 到 列表 后 面 
$("#weibos") .loadTemplate ("#template", weibos, {append:true}); 
</script> 


上 面 的 代码 将 HTML 标记 与 JavaScript 分 离 了 , 为 此 我 们 把 模板 放 在 单独 的 <scrip 刀 标签 
里 , 代码 中 粗 体 显示 的 是 需要 绑 定 的 属性 。 需 要 注意 script 标签 的 type 属性 不 是 textjavascript， 
而 是 用 texthtml( 还 可 以 使 用 text/template) 表 明 这 是 个 HTML 模板 ， 而 不 是 JavaScript。 这 一 
设置 会 阻止 浏览 器 把 它 当 成 JavaScript 运行 其 中 的 内 容 。 

前 端 模板 可 以 分 为 两 大 类 : 带 有 嵌入 式 JavaScript 的 模板 和 较 少 逻辑 控制 的 模板 。 只 能 
传 入 变量 ， 并 使 用 几 个 预先 定义 好 的 函数 ， 属 于 较 少 逻辑 控制 的 模板 。 带 有 嵌入 式 wp 
的 模板 中 常用 的 有 Underscore 模板 。Underscorejs 是 一 个 很 精干 的 库 ， 压 缩 后 只 有 4KB。 
提供 了 几 十 种 函数 式 编程 的 方法 ， 弥 补 了 标准 库 的 不 足 ， 大 大 方便 了 JavaScript 的 编程 。 
Underscorejs 定义 了 一 个 下 划 线 (_) 对 象 ， 函 数 库 的 所 有 方法 都 属于 这 个 对 象 。 这 些 方 法 大 致 
上 可 以 分 成 : 集合 (collection)、 数 组 (array)、 函 数 (function)、 对 象 (objecb 和 工具 Cutility) 等 5 大 
类 。 其 官方 网 站 为 http:Wunderscorejs.org/， 如 图 8-7 所 示 。 
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Underscore sa JavaScript library that provides a whole mess of useful functional 

- programming helpers without extending any built-in objects. Its the answer to the 
question: "If 1 sit down in front of a blank HTML page, and want to start being 
productive immediately, what do | need?” ._ and the tie to go along with JQuery's tux 
and Backbone's suspenders. 


Underscore provides over 100 fuffctions that support both your favorite workaday 





— findNhere 





binding. javascript templating. creating quick indexes, deep equallty testing. and so on 


functional helpers: map, filter invoke 一 as well as more specialized goodies: function 








图 8-7 Underscore 官网 


下 面 介绍 Underscore 模板 的 基础 知识 。 第 一 步 是 使 用 _.template 方法 创建 一 个 模板 : 


var tmpl = _.template('<div> 你 好 ，<%= name%></div>"'); 


第 二 步 是 编译 模板 。 调 用 模板 定义 的 函数 并 传 入 一 个 包含 模板 中 定义 的 变量 


的 对 象 。 


var result = tmpl ({name:'json'}) 
调用 console log(resulb 会 输出 : 

<div> 你 好 ，json</div> 

我 们 还 可 以 设置 自己 的 界限 符 ， 代 码 如 下 : 


_.templateSettings = {interpolate : /\{\{(.+2?)\}\}/g}; 
var tmplN = _.template('<div> 你 好 ，{ {name}}</div>'); 
var result = tmplN ({name:'json'}); 

console.log (result); 


名 称 的 属性 


像 使 用 jQuery templating 一 样 ， 也 可 以 把 模板 分 离 出 来 放 在 单独 的 script 标签 中 ， 例 如 : 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title></title> 
<script src="http://apps.bdimg.com/libs/jQuery/2.1.1/jQuery.js"> 


</script> 


<script src="http://underscorejs.org/underscore-min.js"></script> 


</head> 
<body> 
</body> 
<script type="text/template" id="my-template"> 
<article> 
<hgroup> 
<h1l><%= title 当 ></h1> 
<h2><%= subtitle %></h2> 
</hgroup> 
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<p><%= description $></p> 

</article> 

</script> 

<script> 

var myTemplate = .template( $('#my-template') .text() ); 

Var compiled = myTemplate ({ 
title: ' 使 用 Underscore 模板 '， 
subtitle: ' 内 部 模板 '， 
description: ' 需 要 了 解 ' 

}); 

$('body') .append (compiled); 

</script> 

</html> 


使 用 内 部 模板 还 是 外 部 模板 各 有 优 缺 点 。 使 用 外 部 模板 更 具有 灵活 性 ， 对 于 大 型 复杂 页 
面 更 适合 ， 同 时 也 增加 了 管理 不 同 页 面 模板 的 难度 和 工作 量 。 一 般 会 把 模板 放 在 页 面 内 部 ， 
把 模板 放 在 页 面 内 部 的 优点 包括 : 把 模板 留 在 HTML 中 意义 更 明确 , 因为 其 他 标记 也 在 里 面 。 
它 管理 起 来 更 容易 。 

Underscore 模板 中 还 可 以 使 用 JavaScript， 这 能 让 我 们 使 用 JavaScript 控制 泻 染 的 结果 。 

基本 的 直 else 语句 很 实用 。 比 如 微 博 列表 模板 中 如 果 表示 图 片 的 变量 是 空 字符 串 ， 就 可 
以 不 显示 图 片 的 缩 略 图 区 域 。 代 码 如 下 所 示 : 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<script src="http://apps.bdimg.com/libs/jQuery/2.1.1/jQuery.js"></script> 
<script src="http://underscorejs.org/underscore-min.js"></script> 
</head> 
<body> 
</body> 
<script type="text/template" id="my-template"> 
<div> 
<div> <%= name %$><div> 


op 
Vv 


<% if (typeof img !== "undefined' && img !=="" 
<img src="<%=img %>" /> 
<% } else {%$> 
没有 图 片 

< > 
</div> 
</script> 
<script> 
var myTemplate = _.template( $('#my-template') -text() ); 
Var compiled = myTemplate ({ 

name: "Zhangsan'v 

img: "loading.gif" 
}); 
$('body') .append (compiled); 
compiled = myTemplate ({ 
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} 


name: "1isi" 


js 


$ ('body') .append (compiled); 


</script> 
</html> 


代码 的 运行 效果 如 图 8-8 所 示 。 


zhangsan 
@ee 
. 


© 
@@- 
lisi 


没有 图 片 





图 8-8 Underscore 中 的 让 else 


在 组 装 列表 时 还 可 以 使 用 循环 语句 ， 代 码 如 下 : 


<h2><%= province %></h2> 
<ul> 


<% for ( var i = 0, len = schools.length; i++ ) { g> 
<1i><s= schools[i] %></1i> 
<% } 和 > 


</ul> 


其 实 Underscorejs 拥有 自己 特定 的 循环 函数 : _.each0。 
使 用 each 函数 也 同样 可 以 完成 组 装 列表 的 功能 ， 并 且 更 容易 一 些 ， 代 码 如 下 : 


<h2><%= province %></h2> 
<ul> 


<% _.each(schools , function( item ) { %> 
<1i><%= item %></1i> 
<% } $> 


</ul> 


大 型 应 用 考虑 更 多 的 是 响应 速度 ， 随 着 应 用 越 来 越 复杂 、 模 板 越 来 越 多 ， 模 板 之 问 各 种 


依赖 





tH 现 的 时 候 ， 我 们 的 页 面 会 变 得 爱 肿 不 堪 、 难 以 维护 ， 如 何 才 是 最 佳 的 前 端 模 板 组 织 


案 呢 ?前 端 模板 预 编译 工具 的 出 现 解 决 了 响应 速度 和 管理 模板 的 问题 。 它 通过 预 编译 技术 让 
编译 后 的 代码 不 依赖 于 模板 引擎 ， 异 步 加 载 预 编译 后 的 文件 。 它 采用 目录 来 组 织 维护 前 端 模 
板 , 从 而 让 前 端 模板 实现 工程 化 管理 , 最 终 保证 前 端 模板 在 复杂 单 页 Web 应 用 下 的 可 维护 性 。 


8.5.1 





8.5 ”jQuery UI 插件 介绍 


jQuery UI 下载 及 安装 


jQuery UI 是 一 套 jQuery 的 页 面 UI 插件 ,包含 很 多 种 常用 的 页 面 控件 ， 例 如 Tabs、 拉 帘 
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效果 、 对 话 框 、 拖 放 效果 、 日 期 选择 、 颜 色 选择 、 数 据 排序 、 窗 体 大 小 调整 等 ， 它 还 包括 许 


多 CSS 样式 表 。 当 我 们 访问 jQuery UI 网 站 (http://jQueryui.com/) 时 ， 可 以 快速 下 载 通用 版 本 ， 
也 可 以 自 定义 下 载 ， 如 图 8-9 所 示 。 

















Themes Development Support Blog About 





图 8-9 jQuery UI 官网 


点 击 自 定义 下 载 的 链接 ， 我 们 可 以 组 装 适合 自己 的 个 性 化 包 ， 可 以 去 掉 任 何不 需要 使 用 
如 图 8-10 所 示 。 


的 组 件 (例如 Datapicker 小 部 件 ) 来 缩小 库 的 大 小 ， 






Download Builder 








图 8-10 个 性 化 包 


下 载 生 成 器 (Download Builden 页 面 的 第 一 栏 列 出 了 jQuery UI 所 有 的 JavaScript 组 件 分 


类 ;核心 (UI Core)、 交 互 部 件 (Interactions)、 小 部 件 (Widgets) 和 效果 库 (Effects)。jQuery UI 中 
的 一 些 纪 





且 件 依赖 于 其 他 组 件 ， 当 选中 这 些 组 件 时 ， 它 所 依赖 的 其 他 组 伯 
我 们 所 选 的 组 件 将 会 合并 到 一 个 JavaScript 文件 。 


单 击 Download 按钮 , 完成 下 载 。 我 们 将 得 到 一 个 包含 所 选 组 件 的 自 定义 zip 文件 , 解压 
后 如 图 8-11 所 示 。 


F 也 都 会 自动 被 选中 。 
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pg ， 下载 ，jquery-ui-L11.4.custom 》 





Ee jquery-ui.css 
-- 
到 jquery-uijs 
(i 
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jquery-ui.minjs 
Ejquery-ui.structure.css 








jquery-ui.structure.min.css 
i 


jquery-uitheme.min.css 





图 8-11 下 载 后 的 jQuery UI 


在 文本 编辑 器 中 打开 index.html，index.html 提供 了 jQuery UI 组 件 的 演示 例子 ， 并 且 使 
的 是 我 们 选择 的 样式 。 一 般 情况 下 ， 需 要 在 HTML 中 引用 三 个 文件 ， 代 码 如 下 所 示 : 














<link rel="stylesheet" href="jQuery-ui.min.css"> 
<script src="external/jQuery/jQuery.js"></script> 
<script src="jQuery-ui.min.js"></script> 


8.5.2 使 用 jQuery UI 


jQuery UI 能 够 对 HTML 元 素 进行 增强 ， 以 增加 与 用 户 的 交互 。 这 些 常见 的 交互 行为 包 
括 sortable、draggable、droppable、resizable 和 selectable。 这 也 是 jQuery UI 的 核心 功能 之 一 。 
1. draggable 和 droppable 


draggable 和 droppable 两 者 经 常 在 一 起 使 用 ， 使 我 们 能 够 单 击 并 拖 搜 一 个 HTML 元 素 ， 
然后 将 其 拖 动 到 某 个 目标 区 域 。 代 码 如 下 : 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI Droppable - Default functionality</title> 
<script src="http://apps.bdimg.com/libs/jQuery/2.1.1/jQuery.js"></script> 
<link rel="stylesheet" href="jQuery-ui-1.11.4.custom/jQuery-ui.min.css"> 
<script src="jQuery-ui-1.11.4.custom/jQuery-ui.min.js"></script> 
<style> 
#draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 
10px 10px 10px 0; } 
#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 
10px; } 
</style> 
<script> 


。232 。 Web 前 端 开发 技术 一 一 HTML5+Ajax+jQuery 


$(function() { 
$( "#draggable" ) .draggable(); 
$( "#droppable" ) .droppable({ 
drop: function( event, ui ) { 
$( this ) 
-addClass( "ui-state-highlight" ) 
.find( "p"” ) 
-html ( "Dropped!™ ); 
} 
]) 7 
]) 7 
</script> 
</head> 
<body> 
<div id="draggable" class="ui-widget-content"> 
<p>Drag me to my target</p> 
</div> 
<div id="droppable" class="ui-widget-header"> 
<p>Drop here</p> 
</div> 
</body> 
</html> 


运行 效果 如 图 8-12 所 示 。 


Dropped! 


Drag me to 
my target 





图 8-12 jQuery UI 拖 放 


我 们 做 的 仅仅 是 在 两 个 <div> 元 素 上 调用 了 draggable 和 droppable 方法 。 在 droppable 方 
法 中 还 使 用 了 一 个 对 象 参 数 ， 它 可 以 定义 droppable 行为 的 不 同 选项 ， 
回调 函数 ,用 在 某 个 元 素 释放 于 目标 元 素 时 触发 .这 种 获取 某 个 元 素 然后 调用 相关 联 的 jQuery 


UI 方 法 的 模式 是 所 有 jQuery UI 方 法 的 基本 模式 。 


2. resizable 


我 们 使 用 了 一 个 drop 


resizable 行为 能 够 使 得 DOM 元 素 大 小 可 以 调整 ， 它 会 为 元 素 增加 一 个 小 握 柄 ， 并 通过 





点 击 和 拖 动 动作 调整 大 小 。 代 码 如 下 : 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 


<title>jQuery UI resizable - Default functionality</title> 
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<script src="http://apps.bdimg.com/libs/jQuery/2.1.1/jQuery.js"></script> 
<link rel="stylesheet" href="jQuery-ui-1.11.4.custom/jQuery-ui.min.css"> 
<script src="jQuery-ui-1.11.4.custom/jQuery-ui.min.js"></script> 
<style> 
#resizable { width: 150px; height: 150px; background-color : #0099ff; } 
#resizable h3 { text-align: center; margin: 0; } 
</style> 
<script> 
$(function() { 
$( "#resizable" ) .resizable(); 
]) 7 
</script> 
</head> 
<body> 
<div id="resizable" class="ui-widget-content"> 
<h3 class="ui-widget-header">Resizable</h3> 
</div> 
</body> 
</html> 


运行 效果 如 图 8-13 所 示 。 


图 8-13 jQuery UI 调整 大 小 


3. selectable 





selectable 可 以 使 得 DOM 元 素 可 以 被 选择 ， 通 过 这 一 功能 可 以 用 任意 的 DOM 元 素 模 拟 
复 选 框 ， 点 击 时 按 住 Ctrl 键 就 可 以 实现 多 选 。 例 如 : 
<!doctype html> 


<html lang="en"> 
<head> 





<meta charset="utf-8"> 

<title>jQuery UI resizable - Default functionality</title> 

<script src="http://apps.bdimg.com/libs/jQuery/2.1.1/jQuery.js"></script> 
<link rel="stylesheet" href="jQuery-ui-1.11.4.custom/jQuery-ui.min.css"> 


<script src="jQuery-ui-1.11.4.custom/jQuery-ui.min.js"></script> 


</head> 
<body> 
<style> 
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#feedback { font-size: 1.4em; } 
#selectable -ui-selecting { background: #FECA40; } 
#selectable -ui-selected { background: #F39814; color: white; } 
#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; } 
#selectable 1i {margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; } 
</style> 
<script> 
$(function() { 
$( "#selectable" ) .selectable(); 
}3» 
</script> 
</body> 
<ol id="selectable"> 
<li class="ui-widget-content"> 可 选择 1</1i> 
<li class="ui-widget-content"> 可 选择 2</1i> 
<1i class="ui-widget-content"> 可 选择 3</1i> 
选择 4</1i> 
<1li class="ui-widget-content"> 可 选择 5</1i> 
<1i class="ui-widget-content"> 可 选择 6</1i> 
<li class="ui-widget-content"> 可 选择 7</1i> 
</ol> 
</html> 








<1i class="ui-widget-content"> 








运行 效果 如 图 8-14 所 示 。 





图 8-14 jQuery UI 可 选择 


4. sortable 


sortable 行为 使 得 DOM 元 素 集合 可 以 进行 排序 ， 当 用 户 进行 拖 放 排序 时 ， 其 他 元 素 的 位 
置 会 自动 调整 。 例 如 : 


<!doctype html> 

<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<title>jQuery UI sortable - Default functionality</title> 
<script src="http://apps.bdimg.com/libs/jQuery/2.1.1/jQuery.js"></script> 
<link rel="stylesheet" href="jQuery-ui-1.11.4.custom/jQuery-ui.min.css"> 
<script src="jQuery-ui-1.11.4.custom/jQuery-ui.min.js"></script> 
<style> 
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; } 
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; 
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font-size: 1.4em; height: 18px; } 
#sortable li span { position: absolute; margin-left: -1.3em; } 
</style> 
<script> 
$(function() { 

$( "#sortable" ).sortable(); 

$( "#sortable" ) .disableSelection(); 
]) 7 
</script> 

</head> 
<body> 

<ul id="sortable"> 
<li class="ui-state-default"><span class="ui-icon"></span>Item 1</1i> 
<li class="ui-state-default"><span class="ui-icon"></span>Item 2</1i> 
<1i class="ui-state-default"><span class="ui-icon"></span>Item 3</1i> 
<1li class="ui-state-default"><span class="ui-icon"></span>Item 4</1i> 
<li class="ui-state-default"><span class="ui-icon"></span>Item 5</1i> 
<1li class="ui-state-default"><span class="ui-icon"></span>Item 6</1i> 
<li class="ui-state-default"><span class="ui-icon"></span>Item 7</1i> 


</ul> 
</body> 
</html> 


运行 效果 如 图 8-15 所 示 。 





图 8-15 jQuery UI 排序 


jQuery UI 包含 了 许多 维持 状态 的 小 部 件 (WidgeD), 因此 它 与 典型 的 jQuery 插件 使 用 模式 


略 有 不 同 。 所 有 的 jQuery UI 小 部 件 使 用 相同 的 模式 ， 所 以 只 要 我 们 学 会 使 用 其 


知道 如 何 使 用 其 他 的 小 部 件 。 
5. Dialog 部 件 


对 话 框 (Dialog) 部 件 对 于 常见 的 JavaScript 警告 框 而 言 ， 它 

















一个， 就 


一 个 标题 栏 和 一 个 内 容 区 域 





组 成 ， 且 可 以 移动 位 置 和 调整 尺寸 ， 默 认可 通过 图 标 关 闭 。 这 种 更 灵活 、 可 自 定义 主题 的 弹 


出 框 带 来 了 更 好 的 用 户 体验 。 例 如 : 


<head> 
<script> 
$ (function() { 
$( "#dialog" ) .dialog(); 
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]) 7 
</ Script> 
</head> 
<body> 
<div id="dialog" title=" 基 本 的 对 话 框 "> 
<p> 这 是 一 个 默认 的 对 话 框 ， 用 于 显示 信息 。 对 话 框 窗口 可 以 移动 ， 调 整 尺寸 ， 默 认可 通过 'x' 图 
标 关闭 。</p> 
</div> 
</body> 


运行 效果 如 图 8-16 所 示 。 





图 8-16 jQuery UI 对话 框 


6. Tooltip 部 件 


工具 提示 框 (Tooltip) 部 件 是 可 自 定义 的 、 可 主题 化 的 ， 并 可 以 替代 原生 的 工具 提示 框 。 
该 部 件 接受 tigle 和 alt 属性 。 例 如 : 


<head> 
<script> 
$(function() { 
$( document ) .tooltip(); 
]) 7 
</script> 
</head> 
<body> 
<p><label for="age"> 您 的 年 龄 ,</label><input id="age" 
title=" 年 龄 仅 用 于 统计 。"></p> 
</body> 


运行 效果 如 图 8-17 所 示 。 








图 8-17 jQuery UI 提示 框 


7. Datapicker 部 件 

日 期 选择 (Datapicker) 部 件 是 一 个 富有 交互 性 的 部 件 ， 很 可 能 是 提供 功能 最 多 而 代码 量 最 
少 的 部 件 。 日 期 选择 器 绑 定 到 一 个 标准 的 表单 input 字段 上 。 把 焦点 移 到 input 上 (点 击 或 者 使 
tab 键 )， 会 在 一 个 小 的 覆盖 层 上 打开 一 个 交互 日 历 。 选 择 一 个 日 期 ， 点 击 页 面 上 的 任意 地 



































eh 
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中 显示 选择 的 值 。 例 如 : 


<head> 
<script> 

$(function() { 

$( "#datepicker" ) .datepicker(); 

]) 7 

</script> 
</head> 
<body> 
<p> 日 期 : <input type="text" id="datepicker"></p> 
</body> 


运行 效果 如 图 8-18 所 示 。 
期 | 


February 2015 





图 8-18 jQuery UI 日 期 


8. Autocomplete 部 件 


自动 完成 (Autocomplete) 部 件 使 得 用 户 在 完成 表单 时 , 能 够 看 到 一 个 可 供 选 择 的 提示 内 容 
显示 。 数 据 源 是 一 个 简单 的 JavaScript 数组 ， 也 可 以 使 用 source 选项 指定 服务 器 提供 的 实 
时 数据 。 例 如 : 


<head> 
$( "#tags" ).autocomplete({ 
source: availableTags 
]) 7 
]) 7 
</script> 
</head> 
<body> 
<label for="tags"> 标 签 : </label> 
<input id="tags"> 
</body> 


运行 效果 如 图 8-19 所 示 。 





Clojure 


Java 
JavaScript 





图 8-19 jQuery UI 自动 完成 
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9. Tabs 部 件 


标签 页 (Tabs) 部 件 可 以 创建 一 系列 的 选项 卡 式 元 素 ， 下 面 的 例子 在 目标 Div 元 素 中 包含 
了 数 个 <a> 元 素 的 <ul> 元 素 ， 每 个 <a> 元 素 带 有 一 个 指向 页 面 内 容 区 域 的 href 属性 。 例 如 ， 


<body> 
<script> 
$ (function(){ 
$( "#tabs" ) .tabs(); 
]) 7 
</script> 
</head> 
<body> 





<div id="tabs"> 

<ul> 
<li><a href="#fragment-1"><span>—</span></a></1i> 
<1i><a href="#fragment-2"><span>—</span></a></1i> 
<li><a href="#fragment-3"><span> 三 </span></a></1i> 

</ul> 

<div id="fragment-1"> 
<p> 第 一 个 标签 是 默认 激活 的 : </P> 
<pre><code>$ ( "#tabs" ) .tabs () ; </code></pre> 


</div> 
<div id="fragment-2"> 
内 容 22222222 
</div> 
<div id="fragment-3"> 
内 容 33333333 
</div> 
</div> 
运行 效果 如 图 8-20 所 示 。 


第 一 个 标签 是 默认 激活 的 : 


$( “stabs” ). tabs(); 





图 8-20 jQuery UI 标签 页 


10. Menu 部 件 


菜单 (Menu) 部 件 用 于 创建 一 个 可 折 炙 的 菜单 ， 它 能 够 把 一 系列 嵌 套 <ul> 元 素 的 结构 化 标 
记 转 化 为 一 个 可 设置 主体 的 菜单 。 例 如 : 
<head> 


<script> 
$(function() { 
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$( "#menu" ) .menu() 
1)s 
</script> 
<style> 
.ui-menu { width: 150px; } 
</style> 
</head> 
<body> 
<ul id="menu"> 
<li><a href= 
<1i><a href="#"><span class="ui-icon ui-icon-zoomin"></span> 放 大 </a></1i> 





"><span class="ui-icon ui-icon-disk"></span> 保 存 </a></1i> 


<1i><a href="#"><span class="ui-icon ui-icon-zoomout"></span> 缩 小 </a></1i> 
<li class="ui-state-disabled"><a href="#"><span class="ui-icon ui-icon- 
Print"></span> 打 印 . . .</a></1i> 


<1i> 
<a href="#"> 播 放 </a> 
<ul> 
<li><a href="#"><span class="ui-icon ui-icon-seek-start"></span> 上 一 个 


</a></1i> 
<1i><a href="#"><span class="ui-icon ui-icon-stop"></span>》 停 止 </a></1i> 
<li><a href="#"><span class="ui-icon ui-icon-play"></span> 播 放 </a></1i> 
<1i><a href="#"><span class="ui-icon ui-icon-seek-end"></span> 下 一 个 
</a></1i> 
</ul> 
</1i> 
</ul> 
</body> 





运行 结果 如 图 8-21 所 示 。 








图 8-21 jQuery UI 菜单 


11. Button 部 件 
按钮 (Button) 部 件 能 够 将 <input> 元 素 、<button> 元 素 以 及 链接 转化 为 浏览 器 兼容 的 按钮 。 
例如 : 


<input type="submit" value=" 一 个 提交 按钮 "> 
$( "input[type=submit]") .button(); 
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12. Progressbar 部 件 


进度 条 (Progressbar) 部 件 类 似 于 <progress> 元 素 ， 比如, 我们 在 id 为 elem 的 元 素 上 调用 
无 参数 的 progressbar0 方法 ， 小 部 件 会 按照 它 的 默认 选项 进行 初始 化 。 我 们 可 以 在 初始 化 时 
传递 一 组 选项 (option 对 象 )， 这 样 即 可 重 写 默认 选项 。 代 码 如 下 : 


$( "#elem" ) .progressbar ({ value: 20 }); 








既然 小 部 件 已 经 初始 化 ， 我 们 就 可 以 查询 它 的 状态 ， 或 者 在 小 部 件 上 执行 动作 。 所 有 初 
始 化 后 的 动作 都 以 方法 调用 的 形式 进行 。 为 了 在 小 部 件 上 调用 一 个 方法 ， 我 们 可 以 向 jQuery 
插件 传递 方法 的 名 称 。 例 如 ， 为 了 在 进度 条 小 部 件 上 调用 value 方法 ， 应 该 使 用 下 列 代码 : 


$( "#elem" ) .progressbar ( "value" ); 
$( "#elem" ) .progressbar("option", "value" ); 


13. Slider 部 件 


滑 块 (Sliden) 部 件 与 HTMLS5 中 type 类 型 为 range 的 输入 控件 类 似 ， 我 们 可 以 访问 滑动 条 
的 值 。 代 码 如 下 : 


<script> 
$ (document) .ready (function() { 
$('#sld value') .slider({ min: 1, max: 100 }); 
$("#dlg value") .dialog( { autoopen: false, title: "Slider Value", 
open: function(){ 
$("#dlg value") .html ("The current value is: "+ 
$("#sld value") .slider( "option", "value" )); 
} 
} ); 
$("#btn value") .button () .click (function() 
{ $("#dlg value") .dialog ("open"); }); 
]) 7 
</script> 
</head> 
<body> 
<div id="sld value" style="margin-bottom:10px;"></div> 
<button id="btn value">Display Value</button> 
<div id="dlg value"></div> 
</body> 


运行 效果 如 图 8-22 所 示 。 





Display Value 





Slider Value 











The current value is: 9 





图 8-22 jQuery UI 滑 块 
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本 章 小 结 


章 介绍 了 jQuery 插件 的 使 用 方法 ， 着 重 讨论 了 jQuery ImageArea Select 插件 和 jQuery 

templating 插件 。 

探讨 了 在 选择 第 三 方 插件 时 的 注意 事项 和 原则 ， 这 也 有 助 于 自己 开发 一 个 流行 的 插件 。 
还 学 习 了 创建 插件 的 各 种 方式 ， 在 这 个 过 程 中 既 使 用 了 jQuery 的 全 局 函数 ,也 使 用 了 jQuery 
的 原型 对 象 。 

通过 jQuery UI 插件 的 学 习 , 我 们 体验 了 jQuery UI 插件 的 强大 功能 。 无 论 从 外 观 还 是 功 
能 上 看 ,jQuery UI 提供 的 “ 开 箱 即 用 ”的 部 件 都 非常 类 似 于 我 们 熟悉 的 桌面 应 用 程序 中 的 相 
应 元 素 。 使 用 jQuery UI 能 够 创建 先进 的 网 站 和 Web 应 用 。 


本 章 练习 








1. 如 何 创建 自 定义 的 jQuery 插件 ? 
2. jQuery UI 的 作用 是 什么 ? 
3. js 模板 引擎 是 什么 ? 
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Ajax 的 应 用 非常 广泛 ， 在 Web 应 用 中 经 常 使 用 Ajax 提交 数据 、 加 载 数据 。 甚 至 在 类 似 
jQuery Mobile 的 UI 框架 中 ， 其 底层 也 使 用 了 Ajax 技术 。 


本 章 内 容 : 
@ 练习 使 用 以 Ajax 方式 加 载 数据 、 提 交 数 据 
@ 如 何 使 用 jQuery Mobile 开发 Web 移动 应 用 


9.1 以 Ajax 方式 加 载 数据 


9.1.1 ”加载 XML 数据 


Ajax 这 个 名 词 包含 异步 的 XML, 可 见 XML 作为 数据 交换 格式 的 通用 性 。 在 早期 , XML 
的 推出 使 Web 和 电子 商务 的 开发 人 员 激动 不 已 ， 因 为 很 多 语言 都 有 支持 XML 解析 和 序列 化 
的 函数 ， 一 旦 我 们 熟练 掌握 了 XML， 就 可 发 现 它 正 是 解决 许多 令 人 感到 棘手 的 问题 的 有 力 
工具 。 在 人 人 微 博 网 站 的 个 人 信息 页 面 开发 中 ,需要 实现 省 市 级 联 下 拉 框 ,页面 效 果 如 图 9-1 
所 示 。 
OC 
“真实 姓名 : Ba 
“所 在 地 : [ 浙 了 省 


"性别 : @ 男 


生日 : zo14712719 











博客 地 址 : 上 





图 9-1 省 市 级 联 下 拉 框 


可 以 把 省 市 信息 保存 在 数据 库 或 者 文件 里 面 ， 这 里 使 用 XML 保存 省 市 信息 ， 省 份 的 数 
据 保 存在 Provincesxml 中 ， 格 式 如 下 所 示 : 





<?xml version="1.0" encoding="utf-8"?> 

<Provinces> 
<Province ID="1"” ProvinceName=" 北 京 市 "> 北京 市 </Province> 
<Province ID="2" ProvinceName=" 天 津 市 "> 天 津 市 </Province> 
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<Province ID="3" ProvinceName=" 河 北 省 "> 河北 省 </Province> 


</Provinces> 


城市 信息 保存 在 Cities xml 文件 中 ， 格 式 如 下 所 示 : 


<?xml Version="1.0" encoding="utf-8"?> 

<Cities> 
<City ID="1" CityName=" 北 京 市 ”PID="1"” ZipCode="100000"> 北 京 市 </City> 
<City ID="2" CityName=" 天 津 市 " PID="2" ZipCode="100000"> 天 津 市 </City> 
<City ID="3" CityName=" 石 家 庄市 " PID="3" ZipCode="050000"> 石 家 庄市 </City> 
<City ID="4" CityName=" 唐 山 市 " PID="3" ZipCode="063000"> 唐 山 市 </City> 
<City ID="5" CityName=" 秦 皇 岛 市 " PID="3" ZipCode="066000"> 秦 皇 岛 市 </City> 





</Cities> 


使 用 Ajax 技术 实现 用 户 选择 左边 的 下 拉 框 的 某 个 选项 时 ， 右 边 下 拉 框 的 选项 随 之 改变 ， 
还 要 实现 用 户 将 省 市 信息 保存 后 ， 下 次 重新 打开 页 面 能 够 正确 显示 自己 的 省 市 信息 。 由 于 省 
市 信息 一 般 不 会 发 生变 化 ， 而 且 经 常 使 用 ， 所 以 可 以 一 次 性 将 城市 信息 加 载 出 来 。 如 果 更 在 
意 网 络 带宽 和 传输 速度 ， 也 可 以 只 加 载 已 经 选择 的 省 份 的 城市 信息 。 在 这 里 我 们 使 用 的 方案 
是 当 需 要 加 载 城市 信息 的 时 候 ， 一 次 性 使 用 Ajax 方式 将 所 有 城市 信息 加 载 到 页 面前 端 。 

当 页 面 初次 加 载 时 ， 如 果 从 服务 器 端 得 到 的 数据 已 经 包含 省 份 信息 ， 则 右边 的 下 拉 框 也 
要 随 之 变动 。 我 们 使 用 jQuery 事件 的 自 定义 事件 ， 定 义 一 个 provinceChange 事件 ,在 城市 下 
拉 框 上 监听 这 个 事件 ， 然 后 显示 不 同 的 数据 。JavaScript 代码 如 下 : 








$ ("select [name=province]") .append("<option value='0'> 请 ..</option>"); 
$ ("select [name=city]") .append ("<option value="'0'> 请 选择 . .</option>"); 
// 省 份 ， 城 市 
Var provinceData cityData; 
$.ajax({ 
url: '/rrwb/xml/Provinces.xml', 
type: "GET' 
dataType: ‘xml' 
}) 
.done (function (xmldoc) { 
console.log("load provinces success"); 
provinceData = $ (xmldoc) .find ("Province"); 
$ (provinceData) .each (function(){ 
$ ("select [name=province]") .append ("<option value="'"+$ (this) .attr ("ID") 
+"'>"+$ (this) .attr ("ProvinceName")+"</option>"); 
}) 
}) 


$ ("select [name=province]") .change (function(event) { 
$ ("select [name=city]") .trigger( "provinceChange", [$ (this) .val(),0]); 
]) 7 
$("select [name=city]") .on ("provinceChange" ,function (event, provinceValue, 


cityValue){ 
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// 如 果 没 有 城市 数据 ， 则 同步 加 载 
if(cityData == null){ 
$.ajax({ 
url:"/rrwb/xml/Cities.xml", 
type:"get", 
datatype: "xml", 
/ /同步 执行 ， 避 免 绑 定 失败 
async : false, 
success:function (xml){ 
cityData = xml; 


1D); 
} 
$ ("select [name=city]") .find("option") .remove (); 
$ ("select [name=city]") .append ("<option value="'0'> 请 选择 . .</option>"); 


$ (cityData) .find ("Cities>City[PID="+provinceValue+"]") .each (function(){ 


$ ("select[name=city]") .append ("<option value="'"+$ (this) .attr ("ID")+ 
"">"+S$ (this) .attr ("CityName")+"</option>"); 
1D); 


$ ("select[name=city]") .val (cityValue); 
]) 7 


总 之 ，XML 提供 了 一 种 开发 Web 应 用 程序 具有 潜力 和 灵活 性 的 技术 ， 它 使 应 用 程序 可 
以 实现 异 构 环境 下 的 无 终 集 成 。 


9.1.2 ”加载 JSON 数据 


在 人 人 微 博 网 站 中 ， 服 务 器 从 数据 库 返回 的 数据 都 是 以 JSON 数据 格式 返回 的 。 当 用 户 
访问 个 人 信息 页 面 时 ， 首 先 会 加 载 用 户 的 个 人 信息 。 代 码 如 下 所 示 : 


$.ajax({ 
url: 'http://localhost:8080/rrwb/crud/user/show', 
type: 'POST', 
dataType: 'json', 
data: {_id: sessionStorage.userId}, 
}) 
.done (function (response) { 
$('input [name= id]') .val (response. id); 
$('input [name=login name]') .val (response.login name); 
$('input [name=nick name]') .val (response.nick name); 
$("'input [name=real name]') .val (response.real name); 
$('select [name=province] ') .val (response.provinceValue); 
// 触 发 provinceChange 事件 
//$ ("select[name=city]") .trigger( "provinceChange", [response. 
provinceValue, response.cityValue]); 
$("'input [name=birthday] ') .val (response.birthday); 
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$("'input [name=blog] ') .val (response.blog); 


$('input [name=qq] ') .val (response.qq); 


$('input [name=msn] ') .val (response.msn); 
$ ("input [name=gender] [value="'+response.gender+']') .attr ("checked", 


'checked'); 


$("#crop preview") .removeAttr ("style"); 


$("#crop preview") .attr ("src", response.img) ; 
$("#age") .val (response.age); 


$("#display age") .val (response.age); 


$ ("#0other email") .val (response.other email); 


9.2 以 Ajax 方式 提交 数据 


9.2.1 无 刷新 的 表单 修改 


当 用 户 修改 个 人 信息 后 ， 需 要 将 个 人 信息 保存 到 服务 器 。 


存 个 人 信息 的 API， 如 下 所 示 : 


接口 说 明 : 编辑 用 户 个 人 信息 
URL: http://localhost:8080/rrwb/crud/user/edit 
HTTP 请 求 方式 : POST/GET 


请 求 参数 如 表 9-1 所 示 。 


表 9-1 请求 参数 


方面 我 们 需要 知道 服务 器 人 


不 


















































参数 名 称 类 型 说 了 明 
login name String 登录 名 ， 必 输 
nick name String 了 昵称， 必 输 
img String 缩 略 图 地 址 
real name String 真实 姓名 
provinceValue String 所 在 省 份 编号 
provinceName String 所 在 省 份 名 称 
cityValue String 所 在 城市 编号 
cityName String 所 在 城市 名 称 
gender String 性 别 
age Strng 年 龄 
other email String 备用 邮箱 
blog String 博客 地 址 
qq String QQ 
pwd String 密码 ， 必 输 
msn String MSN 
birthday String 生日 
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响应 参数 如 表 9-2 所 示 。 





表 9-2 ”响应 参数 
参数 名 称 描述 
二 0: 插入 失败 
Ee 1: 插入 成 功 





我 们 再 次 确定 页 面 中 个 人 信息 的 相关 字段 与 API 接口 一 致 ， 然 后 使 用 Ajax 进行 表单 提 
交 。 实 现 此 功能 的 代码 如 下 所 示 : 


$("#send") .click (function(e) { 
e.preventDefault (); 
// 省 份 名 称 、 城 市 名 称 
Var myPName = '',myCName = "'; 
// 检 查 下 拉 框 选择 的 不 是 “请 选择 ” 
if($('select[name=province] ').val() != '0°'){ 
myPName = $('select[name=province] option:selected') .text(); 
} 
if($('select[name=city]') .val() != '0°'){ 
myCName = $('select[name=city] option:selected') .text(); 
} 
$.ajax({ 
url: 'http://localhost:8080/rrwb/crud/user/edit', 
type: 'post', 
dataType: 'json', 
data: {_id:$('input[name= id]').val() ， 
login name:$('input [name=login name]') .val(), 
nick name:$('input [name=nick name]') .val()， 
real name:$('input[name=real name]') .val()， 
provinceValue:$('select [name=province]') .val (), 
provinceName:myPName, 
cityValue:$ ('select [name=city] ') .val (), 
cityName:myCName, 
birthday:$ ('input [name=birthday] ') .val (), 
img:$ ("#crop preview") .attr("src"), 
msn:$('input [name=msn] ') .val ()，, 
qq:$('input [name=qq] ') .val (), 
blog:$ ('input [name=blog] ') .val (), 
other email:$('input [name=other email]') .val(), 
gender:$("'input [type=radio] :checked') .val () 
age:$('input [name=age] ') .val ()} 
}) 
.done (function (response) { 
if(response.code =——= 1 ){ 
alert ("保存 成 功 ! ") ; 
console.1log (response.data); 
} 


console.log("success"); 
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9.2.2 无 刷新 的 表单 新 增 


在 个 人 主页 页 面 中 ， 需 要 实现 无 刷新 的 微 博 发 布 ， 也 就 是 无 刷新 的 表单 新 增 。 新 增 成 功 
后 ， 在 微 博 列表 中 显示 所 有 最 新 发 布 的 微 博 ， 如 图 9-2 所 示 。 


有 + 式 角 全 事 起 告诉 大 宗 ? 还 可 以 输入 24 字 








和 iQuery 


FF EE 


Es: 我 要 精通 jgusry 我 要 精通 juery 











图 9-2 ”发 布 微 博 


这 里 需要 调用 服务 端 新 增 微 博 的 API， 如 下 所 示 : 
接口 说 明 : 发 布 微 博 

URL: http://localhost:8080/rrwb/crud/weibo/add 
HTTP 请 求 方式 : POST/GET 

请 求 参数 如 表 9-3 所 示 。 


表 9-3 请 求 参 数 
参数 名 称 明 
user id 
User nickName 
user head img 


img 





content 


响应 参数 如 表 9-4 所 示 。 


表 9-4 响应 参数 


参数 名 称 说 了 明 
0: 插入 失败 


1: 插入 成 功 








下 面 我 们 使 用 Ajax 来 实现 无 刷新 的 表单 新 增 。 
HTML5 代码 如 下 : 


<div id="tips"> 





<div id="look"><img src="images/ico 01.jpg" /><span class="look1"> 表 情 
</span></div> 
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<form name="" id="upload form" method="post" enctype="multipart/form-data" > 
<div id="picture"><img src="images/ico 02.jpg" /> 

<span class="lookl1"> 

<!-- 上 传 图 片 按钮 --> 

<div class="fileWrapper"> 

<input name="photo" id="file" class="fileInput" size="27" type="file" /> 
<a class="fileButton"> 图 片 </a> 





</div> 

</span> 

</div> 

<!-- 提 示 信 息 --> 

<div id="notice" ></div> 


<!-- 保 存 图 片 地 址 --> 

<input type="hidden" id="uploaded image" name="uploaded image" /> 
</form> 

<div id="submit"> 





<div id="sub"><input id = 'submitWeiboBtn' name="submit" type="button" 
value=" 发 布 " /> 

</div> 

</div> 

</div> 


JavaScript 代码 如 下 : 
// 默认 配置 


var defaults = { 
allowed: 140, 
warning: 25, 
cssWarning: 'warning', 
// 微 博 的 总 页 数 
weiboPages:0, 
// 当 前 显示 第 儿 页 微 博 
currentWeiboPage:1, 
// 每 一 页 的 微 博 个 数 
currentWeiboSize:6, 
friendPages:0, 
// 上 次 获取 最 新 微 博 的 时 间 
last refresh time: (new Date()).getTime(), 
// 微 博 列表 中 时 间 最 晚 的 微 博 的 发 布 时 间 


last more time: (new Date () ) .getTime () 


$("#file") .change (function (event) { 
if($("#file") .val() !=""'){ 
$ ('#notice') .text(' 正 在 上 传 ') .fadeIn(); 
$ ("#upload form") .submit (); 
} 
else { 
$('#notice') .hide(); 
} 
}); 
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$("#upload form") .submit (function(e) { 
e.preventDefault (); 
if(window.FormData !== undefined) // HTML5 浏览 器 
{ 
Var formData = new FormData (this); 
// 上 传 图 片 
$.ajax({ 
url: 'http://localhost:8080/rrwb/crud/uploadWeiboServlet', 
type: 'POST', 
mimeType: "multipart/form-data", 
data:formData, 
contentType: false, 
cache: false, 
processData:false 
}) 
.done (function(data) { 
console.1log (data); 
var response = $.parseJSON (data); 
if(response.code == 1){ 
$('#notice') .text (response.url) 
$("#uploaded image") .val (response.url); 
$('#notice') .fadeOut (); 
alert ("上 传 成 功 ! "); 


}) 
-fail(function() { 
console.1log ("error"); 
}) 
.always (function() { 
console.log("complete"); 
}) 7 
// 阻 止 默认 动作 
} 
else // 旧 浏览 器 
{ 
alert (' 浏 览 器 不 支持 HTML5 ' ) ; 


$("#submitWeiboBtn") .click (function(e) { 
e.preventDefault (); 
$.ajax({ 
url: 'http://localhost:8080/rrwb/crud/weibo/add', 
type: "Post'， 
dataType: 'json', 
data: {user id:sessionStorage-userId, 
user nickName:$('#nick name') .text()， 
content:$('#weiboTextArea') .val() ， 


img:$ ("#uploaded image") -val()， 
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user head img:$('.cont ontleft img').attr('src') 
} 
}) 
.done (function (response) { 
if(response.code =—= 1 ){ 
alert ("保存 成 功 ! "); 
$('#weiboTextArea') .val (''); 
$("#uploaded image") .val(''); 
// 将 数字 变 为 初 值 140 
$(".aviableCount span") .html ('140°'); 
} 
console.log ("success"); 
}) 
.fail (function() { 
console.1og ("发 布 微 博 error"); 
}) 


]) 7 


9.2.3 无 刷新 的 列表 数据 


当 个 人 主页 发 布 微 博 成 功 后 ， 需 要 加 载 最 新 发 布 的 微 博 并 显示 在 微 博 列表 的 最 前 面 。 这 
里 需要 调用 服务 端 查询 最 新 发 布 的 微 博 的 API， 如 下 所 示 : 

e 接口 说 明 : 查询 尚未 加 载 的 最 新 发 布 的 微 博 

® URL: http://localhost:8080/rrwb/crud/weibo/ latest_ weibos 

e HITP 请 求 方式 : POST/GET 

请 求 参数 如 表 9-5 所 示 。 














表 9-5 请 求 参 数 
参数 名 称 说 了 明 
user id 用 户 id， 必 输 
page 当前 页 数 ， 从 1 开始 
size 每 页 显示 的 数量 
curentTime 





上 次 加 载 最 新 微 博 的 时 间 
响应 参数 如 表 9-6 所 示 。 











表 9-6 了 响应 参数 
参数 名 称 说 了 明 
0: 插入 失败 
code 
1: 插入 成 功 
pages 查询 到 的 总 页 数 
data 查询 到 的 数据 的 数组 
IOWS 





查询 到 的 记录 总 数量 
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下 面 我 们 使 用 Ajax 无 刷新 的 获取 列表 数据 ， 代 码 如 下 : 


// 加 载 所 有 自己 及 关注 者 的 比 当前 时 间 新 的 微 博 
function load Latest Followed Weibos(){ 
$.ajax({ 
url: 'http://localhost:8080/rrwb/crud/weibo/latest weibos', 
type: "post'， 
dataType: 'json', 
data: {user id: sessionStorage.userlId,page:1,size:100,currentTime: 
defaults.last refresh time}, 
}) 
.done (function (response) { 
if(response.code == 1 && response.rows > 0){ 
Var weibos = response.data; 
defaults .weiboPages=response.pages; 
$ ("#weibos") .loadTemplate ("#template", weibos, {prepend:true}); 
defaults.last refresh time = (new Date()).getTime(); 
} 
console.log("success"); 
}) 
.fail (function() { 
console.log("error"); 
}) 
.always (function() { 
console.log("complete"); 


]) 7 


9.2.4 加载 更 多 列表 数据 


在 微 博 列表 中 ， 可 以 通过 单 击 “ 更 多 ”按钮 加 载 以 前 发 布 的 微 博 ， 如 图 8-6 所 示 。 这 里 
需要 调用 服务 端 查询 较 早 发 布 的 微 博 的 API， 如 下 所 示 : 

e 接口 说 明 : 查询 较 早 发 布 的 微 博 

® URL: http://localhost:8080/rrwb/crud/weibo/previous weibos 

e HTITP 请 求 方式 : POST/GET 

请 求 参数 如 表 9-7 所 示 。 


表 9-7 请 求 参数 





























参数 名 称 说 了 明 
user id 户 这 ， 必 输 
page 当前 页 数 ， 从 1 开始 
size 每 页 显示 的 数量 
last More Time 指定 从 哪个 时 间 节 点 向 后 查询 微 博 


响应 参数 如 表 9-8 所 示 。 
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表 9-8 ”了 响应 参数 
参数 名 称 说 了 明 
0: 插入 失败 
1: 插入 成 功 
pages 查询 到 的 总 页 数 
data 查询 到 的 数据 的 数组 
IOWS 查询 到 的 记录 总 数量 


下 面 我 们 使 用 Ajax 实现 加 载 更 多 列表 数据 的 功能 。 代 码 如 下 : 
// 单 击 “ 更 多 ”按钮 ， 加 载 所 有 自己 及 关注 者 的 较 旧 的 微 博 


function load Previous Weibos (){ 
$.ajax({ 
url: 'http://localhost:8080/rrwb/crud/weibo/previous weibos', 
type: "post'， 
dataType: 'json', 
data: { 
user id: sessionstorage.userId, 
page:defaults.currentWeiboPage, 
size:defaults.currentWeiboSize, 
last More Time:defaults.last more time 
} 
}) 


.done (function (response) { 


if(response.code == 1 && response.rows > 0){ 
Var weibos = response.data; 
// 添 加 到 列表 后 面 


$("#weibos") .loadTemplate ("#template", weibos, {append:true}); 
// 如 果 行 数 小 于 defaults .currentWeiboSize， 则 全 部 加 载 完 后 “更 多 ”按钮 消失 
if (weibos.length < defaults.currentWeiboSize){ 
$ ('#moreList') .fadeOut (); 
} 
defaults.last more time = weibos [weibos.length-1] .timestamp; 
} 
console.log("success"); 
}) 
.fail (function() { 
console.log("load Previous Weibos error"); 


}) 


网 站 中 可 能 有 许多 图 片 ， 这 时 页 面 中 图 片 数 量 多 ， 而 且 比 较 大 。 如 果 页 面 载 入 时 一 次 性 
加 载 完毕 ， 需 要 用 户 等 半天 ， 针 对 这 种 情况 ， 目 前 很 流行 的 做 法 就 是 滚动 动态 加 载 或 者 延迟 
加 载 。 这 种 做 法 的 好 处 ， 一 是 页 面 加 载 速度 快 ， 二 是 节约 了 流量 ， 因 为 不 可 能 每 个 用 户 浏览 
页 面 时 都 从 头 滑动 到 尾 。 下 面 我 们 在 微 博 列表 中 实现 此 功能 。JavaScript 代码 如 下 : 





S$.fn.isOnScreen function(){ 
Var win = $ (window); 


// 视 窗 的 边框 位 置 
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Var viewport = { 
top : win.scrollTop(), 
left : win.scrollLeft() 

提 

Viewport .right = viewport.]left + win.width(); 

Viewport.bottom = viewport.top + win.height(); 

// 当 前 元 素 的 边框 位 置 

var bounds = this.offset(); 

bounds.right = bounds.left + this.outerWidth(); 

bounds .bottom = bounds.top + this.outerHeight ():; 

// 判 断 元 素 是 否 在 视窗 内 

return (! (viewport.right < bounds.left || viewport.left > bounds.right || 
Viewport.bottom < bounds.top || viewport.top > bounds.bottom)); 


function lazyload() { 
$('.lazyload') .each (function() { 
var element = $ (this); 
if (element.isonScreen()) { 
// 可 以 使 用 data-* 属性 ， 而 不 使 用 value 
element.attr('src', element.attr('value')); 
element .removeClass ('lazyload'); 
} 
}) 
} 
lazyload (); 
$ (window) .scroll (function() { 
lazyload (); 
}) 


在 HTML 页 面 中 只 要 在 img 元 素 上 使 用 lazyload 类 ， 就 可 以 了 。 例 如 : 


<img class="lazyload zoom" data-value="img" onclick="zoom image($ (this). 
parent ());"/> 


9.3 ”jQuery Mobile 介绍 


9.3.1 jQuery Mobile 特性 


jQuery Mobile 以 “Write Less，Do More” 作 为 目标 ， 为 所 有 的 主流 移动 操作 系统 平台 提 
t 了 高 度 统一 的 UI 框架 : jQuery 的 移动 框架 可 以 让 我 们 为 所 有 流行 的 移动 平台 设计 一 个 高 
度 定制 和 品牌 化 的 Web 应 用 程序 ， 而 不 必 为 每 个 移动 设备 编写 单独 的 应 用 程序 。 
jQuery Mobile 目前 支持 的 移动 平台 有 苹果 公司 的 OS(iPhone、ipad、iPod Touch)、Android、 
BlackBerry OS 6.0、Windows Mobile、Symbian 和 MeeGo 等 众多 移动 平台 。 
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目前 jQuery Mobile 的 特性 包括 : 

e 与 jQuery 桌面 版 一 致 的 jQuery 核心 和 语法 ， 以 及 最 小 的 学 习 

e。 兼容 所 有 主流 的 移动 平台 以 及 所 有 支持 HTML 的 移动 平台 。 

e 标记 驱动 的 配置 jQuery Mobile 采用 完全 的 标记 驱动 而 不 需要 JavaScript 的 配置 ， 只 
要 了 解 HTML5 就 可 以 创建 丰富 的 Web 应 用 。 

@ jQuery Mobile 采 用 完全 的 渐进 增强 原则 : 通过 一 个 全 功能 的 HTML 网 页 和 额外 的 JavaScript 
功能 层 ， 提 供 顶 级 的 在 线 体验 。 这 意味 着 即使 移动 浏览 器 不 支持 JavaScript， 我 们 的 
jQuery Mobile 应 用 程序 中 不 强制 使 用 JavaScript， 移 动 应 用 程序 也 仍 能 正常 使 用 。 

e 支持 Ajax 动态 加 载 内 容 。 

e 简单 的 API 为 用 户 提供 鼠标 、 触 措 和 光标 焦点 简单 的 输入 法 支持 。 

e 强大 的 主题 化 框架 jQuery Mobile 提 供 强 大 的 主题 化 框架 和 UI 接口 。 

jQuery Mobile 这 个 组 合 容易 引起 一 些 混淆 ， 这 里 给 出 jQuery Mobile 不 是 什么 。 

e 不 是 在 移动 浏览 器 上 的 jQuery 的 替代 品 。 

e@ 不 是 打包 为 原生 Web 应 用 (Native Web App) 的 工具 。 

e@ 不 是 为 JavaScript 爱 好 者 提供 的 框架 。 

总 之 ，jQuery Mobile 只 是 一 个 全 框架 ， 官 网 地 址 为 http://jQuerymobile.com/， 如 图 9-3 

所 示 。 























lellldg4 





图 9-3 jQuery Mobile 官网 


下 载 完 成 后 ， 解 压 后 如 图 9-4 所 示 。 








jquery.mobile.external-png-1.4.5.css 


jquery.mobile external-png-1.4.5.min.css 


jquery.mobileicons-14.5.css 


jquery.mobileicons-1.4.5.min.css 


jquery.mobileiinline-png-1.4.5.css 


jquery.mobileinline-png-1.4.5.min.css 


jquery.mobileinline-svg-1.4.5.css 


jquery.mobileiinline-svg-1.4.5.min.css 


jquery.mobile.structure-14.5.css 


jquery.mobile.structure-14.5.min.css 


jquery.mobiletheme-1.4.5.css 


jquery.mobile theme-1.4.5.min.css 


jquery.mobile-14.5.css 


jquery.mobile-1.4.5js 






jquery.mobile-1.4.5.mincss 


jquery.mobile-1.4.5.minjs 


jquery.mobile-1.4.5.min.map 





图 9-4 jQuery Mobile 文件 
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9.3.2 jQuery Mobile 初始 配置 





只 需 直 接 在 HTML 页 面 中 引用 以 下 样式 表 和 JavaScript 库 , 这 样 jQuery Mobile 就 可 以 工 
儿子 % 


<head> 

<link rel=stylesheet href="jQuery.mobile-1.4.5.css"> 
<script src="jQuery.js"></script> 

<script src="jQuery.mobile-1.4.5.j]s"></script> 
</head> 


或 者 从 CDN 引用 jQuery Mobile 


<link rel="stylesheet" href="http://code.jQuery.com/mobile/latest/jQuery. 
mobile.min.css" /> 


<script src="http://apps.bdimg.com/libs/jQuery/2.1.1/jQuery.js"></script> 
<script src="http://code.jQuery.com/mobile/latest/jQuery.mobile.min.js"> 
</script> 


9.4 jQuery Mobile 页 面 和 对 话 框 


9.4.1 页 面 基 础 


页 面 是 jQuery Mobile 的 主要 容器 和 入 口 ， 典 型 的 页 面包 括 三 部 分 :header、content 和 
footer。 例 如 : 


<body> 
<div data-role="page"> 
<div data-role="header"> 
<h1> 欢 迎 访问 我 的 主页 </h1> 
</div> 
<div data-role="content"> 
<p> 我 是 一 名 移动 开发 者 ! </p> 
</div> 
<div data-role="footer"> 
<h1> 页 脚 </h1> 
</div> 
</div> 
</body> 


运行 效果 如 图 9-5 所 示 。 
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欢迎 访问 我 的 主页 


页 脚 





图 9-5 jQuery Mobile 页 面 基础 

















jQuery Mobile 中 使 用 了 div 元 素 ， 而 没有 使 用 HTMLS5 中 的 header、footer 元 素 ， 这 是 为 
了 兼容 不 支持 HTMLS5 的 浏览 器 。 如 果 我 们 确定 用 户 一 定 使 用 HTMLS5 浏览 器 ， 也 可 以 使 用 
header、footer 等 元 素 。 

jQuery Mobile 在 div 中 定义 了 role。 不 同 的 role 是 通过 data-role 属性 定义 的 。 比 如 <div 
data-role="page">， 以 data- 开 头 的 属性 是 HTML5 提供 的 自 定义 属性 。 通 过 data-role 属性 的 约 
定 ，jQuery Mobile 可 以 为 我 们 把 div 元 素 泻 染 成 更 丰富 、 交 互 性 更 强 的 元 素 。 

在 上 面 的 代码 中 ,data-role="page" 是 显示 在 浏览 器 中 的 页 面 ; data-role="header" 创建 页 
面 上 方 的 工具 栏 (常用 于 标题 和 搜索 按钮 );，data-role="content" 定义 页 面 的 内 容 ， 比 如 文本 、 
图 像 、 表 单 和 按钮 等 ，data-role="footer" 创建 页 面 底部 的 工具 栏 。 

为 了 适应 手机 的 屏幕 大 小 ， 在 2010 年 ，Ethan Marcotte 提出 了 “ 自 适应 网 页 设计 ” 
(Responsive Web Design) 这 个 名 词 , 指 可 以 自动 识别 屏幕 宽度 并 做 出 相应 调整 的 网 页 设计 。 通 
常 手 机 的 屏幕 比较 小 ， 宽 度 通常 在 600 像素 以 下 ; PC 的 屏幕 宽度 一 般 都 在 1000 像素 以 上 ( 目 
前 主流 宽度 是 1366x768)。 比 如 在 图 9-6 所 示 的 自 适 应 设计 中 。 











图 9-6” 自 适应 设计 








如 果 屏 幕 宽度 大 于 1300 像素 , 则 6 张 图 片 并 排 在 一 行 。 如 果 屏 幕 宽度 在 600 像素 到 1300 
像素 之 间 ， 则 6 张 图 片 分 成 两 行 。 如 果 屏 幕 宽度 在 400 像素 到 600 像素 之 间 ， 则 导航 栏 移 到 
网 页 头 部 。 这 就 需要 在 网 页 代码 的 头 部 ， 加 入 一 行 viewport 元 标签 。 
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<meta name="viewport" content="width=device-width, initial-scale=1"> 








viewport 是 网 页 默认 的 宽度 和 高 度 ， 上 面 这 行 代码 的 意思 是 ， 网 页 宽度 默认 等 于 屏幕 宽 
度 (width=device-width)， 原 始 缩放 比例 为 1.0(initial-scale=1)， 即 网 页 初始 大 小 占 屏幕 面积 
的 100%。 


9.4.2 创建 多 个 页 面 


在 jQuery Mobile 中 ,我 们 可 以 在 单一 HTML 文件 中 创建 多 个 页 面 。 请 通过 唯一 的 id 来 
分 隔 每 张 页 面 ， 并 使 用 href 属性 来 连接 彼此 ， 例 如 : 


<div data-role="page" id="pageone"> 
<div data-role="header"> 
<h1> 欢 迎 访问 我 的 主页 </h1> 
</div> 
<div data-role="content"> 
<p>Welcome!</p> 
<a href="#pagetwo"> 转 到 页 面 二 </a> 
</div> 


<div data-role="footer"> 
<h1> 页 脚 </h1> 
</div> 
</div> 
<div data-role="page" id="pagetwo"> 
<div data-role="header"> 
<h1> 欢 迎 访问 我 的 主页 </h1> 
</div> 
<div data-role="content"> 
<p>Goodbye!</p> 
<a href="#pageone"> 转 到 页 面 一 </a> 
</div> 
<div data-role="footer"> 
<h1> 页 脚 </h1> 
</div> 
</div> 


运行 效果 如 图 9-7 所 示 。 
欢迎 访问 我 的 主页 欢迎 访问 我 的 主页 


Welcomel Goodbyel 


转 到 页 面 二 转 到 页 面 一 


图 9-7 jQuery Mobile 的 多 个 页 面 
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9.4.3 将 页 面 用 作对 话 杠 


对 话 框 是 用 来 显示 信息 或 请 求 输入 的 视窗 类 型 。 
如 需 在 用 户 点 击 ( 轻 触 ) 链 接 时 创建 一 个 对 话 框 , 请 向 该 链接 添加 data-rel="dialog", 例如 : 





<div data-role="page" id="pageone"> 
<div data-role="header"> 
<h1> 欢 迎 访问 我 的 主页 </h1> 
</div> 
<div data-role="content"> 
<p> 欢 迎 ! </p> 
<a href="#pagetwo" data-rel="dialog"> 转 到 页 面 二 </a> 


</div> 


<div data-role="footer"> 
<h1> 页 脚 文本 </h1> 
</div> 
</div> 
<div data-role="page" id="pagetwo"> 
<div data-role="header"> 
<h1> 我 是 一 个 对 话 框 ! </h1> 
</div> 
<div data-role="content"> 
<P> 对 话 框 与 普通 页 面 不 同 ， 它 显示 在 当前 页 面 的 顶端 。 它 不 会 横 跨 整 个 页 面 宽度 。 对 话 框 页 眉 中 的 图 
标 “xX” 可 关闭 对 话 框 。</p> 
<a href="#pageone"> 转 到 页 面 一 </a> 
</div> 
<div data-role="footer"> 
<h1> 页 脚 </h1> 
</div> 
</div> 


运行 效果 如 图 9-8 所 示 。 
我 是 一 个 对 话 杠 ! 


对 话 框 与 普通 页 面 不 同 ， 它 显示 在 当前 页 面 的 顶端 。 它 不 会 


模 跨 整 个 页 面 宽度 。 对 话 框 页 眉 中 的 图 标 “X" 可 关闭 对 话 
框 。 





图 9-8 jQuery Mobile 对 话 框 
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9.5 jQuery Mobile 表单 


9.5.1 jQuery Mobile 表单 输入 

















jQuery Mobile 会 自动 为 HTML 表单 添加 优异 的 便于 触 控 的 外 观 。 表 单 在 移动 设备 上 的 
显示 效果 如 图 9-9 所 示 。 


jQuery Mobile 表单 


jouery UI 


Jouery Moblle 





图 9-9 jQuery Mobile 表单 


按钮 在 表单 中 经 常 使 用 ， jQuery Mobile 提供 了 表单 的 组 件 以 增强 按钮 的 用 户 体验 。 我们 
可 以 在 按钮 上 添加 图 片 或 者 文字 。 创 建 按钮 有 如 下 几 种 方式 : 

e 使 用 button 元 素 ， 使 用 type 属性 为 button、submit、reset、image 的 输入 元 素 

e 使 用 a 元 素 ， 并 添加 data-role="button" 属 性 

@ header 或 footer 中 的 a 元 素 被 自动 泻 染 为 按钮 

例如 : 


<div data-role="page" id="pageone"> 
<div data-role="header"> 
<h1> 欢 迎 访问 我 的 主页 </h1> 
<a href="#" data-icon="refresh">Text with icon</a> 
</div> 


<div data-role="content"> 





<ahref="#" data-role="button" data-corners="false">No rounded corners</a> 
<a href="#" data-role="button" data-inline="true">Inline button</a> 
<ahref="#" data-role="button" data-icon="refresh" data-iconpos="notext"> 

Only icon</a> 
<input type="submit" name="submit" value=" 登 录 " id="login btn"/> 
<button> 注 册 </button> 

</div> 

</div> 
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HIMLS 中 的 其 他 输入 元 素 可 以 直接 在 jQuery Mobile 中 使 用 。jQuery Mobile 会 为 它们 
设置 专门 针对 移动 设备 的 美观 易 用 的 样式 ， 比 如 文本 框 会 自动 扩大 。 在 实现 表单 代码 时 ， 都 
会 有 一 个 label 元 素 对 应 一 个 input 元 素 ， 例 如 : 


<div data-role="content"> 


<div data-role="fieldcontain"> 


<label for="fullname">name: </label> 


<input type="text" name="fullname" id="fullname"> 


</div> 


<div data-role="fieldcontain"> 


<label 
<input 
</div> 


for="search">Search:</label> 


type="search" name="search" id="search"> 


<fieldset data-role="controlgroup"> 


<legend>Choose your gender:</legend> 


<label 
<input 
<label 
<input 


for="male">Male</label> 
type="radio" name="gender" id="male" value="male"> 
for="female">Female</label> 


type="radio" name="gender" id="female" value="female"> 


</fieldset> 


<fieldset data-role="controlgroup" data-type="horizontal"> 


<legend>Choose as many favorite colors as you'd like:</legend> 


<label 
<input 
<label 
<input 
<label 


<input 


for="red">Red</label> 

type="checkbox" name="favcolor" id="red" value="red"> 
for="green">Green</label> 

type="checkbox" name="favcolor" id="green" value="green"> 
for="blue">Blue</label> 


type="checkbox" name="favcolor" id="blue" value="blue"> 


</fieldset> 


<fieldset data-role="controlgroup"> 


<label 


for="slider-1">Slider:</label> 


<input type="range" name="slider-1" id="slider-1" min="0" max="100" 
value="50"> 
</fieldset> 
</div> 


上 面 的 代码 中 ，data-role="fieldcontain" 是 为 了 将 内 容 进 行 分 块 ， 主 要 的 功能 就 是 在 每 个 
区 域 后 面 加 上 一 条 横 线 ， 便 于 区 分 区 域 。data-role="controlgroup" 是 为 了 使 其 所 包围 的 内 容 更 
加 紧凑 ， 更 像 一 个 整体 ， 使 用 data-type="horizontal" 属性 可 以 对 组 内 的 元 素 进行 水 平分 组 ， 
也 就 是 横向 排列 。 运 行 效果 如 图 9-10 所 示 。 
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name: 





| Search 


Choose your gender 
Male 
Female 


Choose as many favorite colors as you'd like: 


Red Green Blue 


Slider 


50 








图 9-10 jQuery Mobile 表单 内 容 分 组 


9.5.2 jQuery Mobile 表单 选择 


带 有 若干 选项 的 下 拉 菜 
单 ， 使 用 <option> 元 素 定义 列表 中 的 可 用 选项 。 在 jQuery Mobile 中 还 可 以 通过 滑动 开关 的 方 
式 进 行 选择 。 例 如 : 


在 jQuery Mobile 中 也 可 以 使 用 选择 菜单 ， 使 用 <select> 元 素 创建 
<fieldset data-role="fieldcontain"> 
<label for="day"> 选 择 日 期 </label> 
<select name="day" id="day"> 
<option value="mon"> 星 期 一 </option> 
<option value="tue"> 星 期 二 </option> 


<option value="wed"> 星 期 三 </option> 
</select> 


</fieldset> 


<fieldset data-role="fieldcontain"> 
<label for="yesNo"> 是 否 :</label> 
<select name="yesNo" id="yesNo" data-role="slider" > 
<option value="0"> 是 </option> 


<option value="1"> 否 </option> 
</select> 


</fieldset> 
显示 效果 如 图 9-11 所 示 。 


选择 日 期 





星期 一 


© 
是 


于 ) 





图 9-11 jQuery Mobile 表单 选择 
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9.6 jQuery Mobile 列表 


9.6.1 jQuery Mobile 列表 视图 


jQuery Mobile 中 的 列表 组 件 有 许多 新 的 特性 ， 应 用 data-role="listview" 到 ul 或 者 ol 元 素 
上 ， 就 可 以 实现 功能 强大 的 无 序列 表 和 有 序列 表 。 例 如 : 


<ul data-role="listview" data-filter="true" data-filter-placeholder=" 搜 索 国家 " > 
<1i data-role="list-divider">A 组 </1i> 
<li><a href="#"> 巴 西 </a></1i> 
<1i><a href="#"> 喀 麦 降 </a></1i> 

i><a href="#"> 墨 西 哥 </a></1i> 

i><a href="#"> 克 罗 地 亚 </a></1i> 

i data-role="list-divider">B 组 </1i> 

1i><a href="#"> 西 班 牙 </a></1i> 

1i><a href="#"> 智 利 </a></1i> 

i><a href="#"> 澳 大 利 亚 </a></1i> 

i><a href="#"> 荷 兰 </a></1i> 

</ul> 


a 的 


在 上 面 的 代码 中 ， 使 用 data-filter="true" 向 列表 中 添加 搜索 框 ， 输 入 关键 字 后 列表 会 自动 
过 滤 符 合 关键 字 的 数据 项 。 还 可 以 使 用 data-filter-placeholder=" 搜 索 国家 "设置 搜索 框 中 的 默认 
文本 ， 如 果 需 要 为 列表 添加 圆 角 和 外 边 距 ， 可 以 使 用 data-insef"tue" 属性 。 
data-role="list-divider" 指 定 当前 行为 分 隔 符 ， 运 行 效果 如 图 9-12 所 示 。 





克罗地亚 © 
澳大利亚 © 


图 9-12 jQuery Mobile 列表 


jQuery Mobile 列表 还 可 以 自动 分 组 ,添加 data-autodividers="true" 属 性 后 ， 列 表 会 根据 列 
表 的 字母 顺序 进行 分 组 。 例 如 : 
<ul data-role="listview" data-autodividers="true"> 
<1i><a href="#">Adam</a></1i> 


<li><a href="#">Angela</a></1i> 
<*liS><a href="#">Billi</a></1i> 
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<li><a href="#">Calvin</a></1i> 
</ul> 


运行 效果 如 图 9-13 所 示 。 


欢迎 访问 我 的 主页 








页 脚 文本 


图 9-13 jQuery Mobile 自动 分 组 


如 果 在 列表 中 媒 套 了 其 他 的 列表 ，jQuery Mobile 会 自动 处 理 嵌 套 ， 并 增加 点 击 列 表 的 效 
果 。 例 如 : 


<ul data-role="listview" data-inset="true" data-shadow="false"> 
<1i data-role="collapsible" data-iconpos="right" data-inset="false"> 
<h2>Birds</h2> 
<ul data-role="listview" data-theme="b" > 
<li><a href="#">Condor</a></1i> 
<li><a href="#">Eagle</a></1i> 
<1i><a href="#">Sparrow</a></1i> 
</ul> 
兴 
<1i> <a href="#">Humans</a></1i> 
<1i data-role="collapsible" data-iconpos="right" data-inset="false"> 
<h2>Fish</h2> 
<ul data-role="listview" data-theme="b"> 
<li><a href="#">Salmon</a></1i> 
<li><a href="#">Pollock</a></1i> 
<li><a href="#">Trout</a></1i> 
</ul> 
</1i> 


</ul> 


运行 效果 如 图 9-14 所 示 。 
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Birds © 

Humans © 

Fish © 
页 脚 文本 


图 9-14 jQuery Mobile 列表 柑 套 


在 jQuery Mobile 中 可 以 使 用 列表 制作 导航 栏 (Navbars)， 导 航 栏 一 般 被 放置 在 页 面 的 
header 或 footer 部 分 。 例 如 : 


<div data-role="navbar" data-grid="c"> 
<ul> 
<li><a href="#" class="ui-btn-active">One</a></1i> 
<li><a href="#">Two</a></1i> 
<li><a href="#">Three</a></1i> 
<li><a href="#">Four</a></1i> 
</ul> 
</div> 


运行 效果 如 图 9-15 所 示 。 


欢迎 访问 我 的 主页 





图 9-15 jQuery Mobile 导航 栏 


在 上 面 的 例子 中 ,使 用 data-role="navbar" 增 强 div 元 素 为 导航 栏 ， 并 使 用 wi-bm-active 样 
式 类 设置 当前 激活 的 选项 。 
9.6.2 jQuery Mobile 列表 内 容 


在 每 一 个 列表 选项 中 ， 还 可 以 添加 更 多 的 内 容 ， 例 如 添加 缩 略 图 和 显示 简单 的 统计 数字 
等 。 这 在 移动 应 用 中 非常 常见 。 例 如 : 








<div data-role="page" id="pageone"> 
<ul data-role="listview"> 
<1i> 


<a href="#"><img src=" assets/img/apple.png"></a> 
<a href="#">Some link</a> 
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</)Ti> 
</ul> 
</div> 


上 面 的 代码 在 元 素 中 放置 了 两 个 链接 ，jQuery Mobile 会 自动 为 第 二 个 链接 添加 蓝 色 
箭头 图 标的 样式 ， 链 接 中 的 文本 将 在 用 户 划 过 该 图 标 时 显示 ， 效 果 如 图 9-16 所 示 。 
J 


©C 
团 | 


图 9-16 jQuery Mobile 列表 内 容 








jQuery Mobile 的 主题 提供 了 许多 内 置 的 样式 ， 其 中 在 列表 中 wi-li-count 样式 类 用 来 指定 
数字 气泡 。 例 如 : 
<ul data-role="listview"> 
<1i><a href="#"> 收 件 箱 <span class="ui-li-count">33</span></a></1i> 
<1i><a href="#"> 发 件 箱 <span class="ui-li-count">23</span></a></1i> 
<1i><a href="#"> 垃 圾 箱 <span class="ui-1i-count">7</span></a></1i> 
</ul> 


运行 效果 如 图 9-17 所 示 。 





图 9-17 jQuery Mobile 列表 样式 


9.7 jQuery Mobile 事件 


9.7.1 jQuery Mobile 页 面 事件 





jQuery 中 存在 各 种 不 同类 型 的 页 面 ， 这 些 页 面 能 够 相互 链接 、 跳 转 ， 就 像 原生 应 用 的 效 
果 一 样 ， 这 让 大 多 数 人 感到 迷惑 。 其 实 jQuery Mobile 为 了 达到 这 样 的 效果 ,提供 了 内 置 的 导 
航 系 统 ， 导 航 系 统 通过 Ajax 异步 加 载 页 面 到 DOM 中 , 并 且 在 显示 新 页 面 内 容 时 增加 动画 效 
果 。 将 这 些 链接 行为 记录 在 浏览 器 访问 的 历史 记录 中 ， 我 们 就 可 以 方便 地 进行 页 面 回 退 。 
在 页 面 显示 在 屏幕 之 前 ， 根 据 时 间 顺 序 会 触发 三 个 不 同 的 事件 : 在 页 面 创建 前 、 页 面 创 
建 、 页 面 初始 化 。 具 体 见 表 9-9。 
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表 9-9 页 面 初始 化 事件 














pagebeforecreate 当 页 面 即将 初始 化 ， 并 且 在 jQuery Mobile 已 开始 增强 页 面 之 前 ， 触 发 该 事件 
pagecreate 当 页 面 已 创建 ， 但 增强 完成 之 前 ， 触 发 该 事件 
ageinit 当 页 面 已 初始 化 ， 并 且 在 jQuery Mobile 已 完成 页 面 增强 之 后 ， 触 发 该 事件 





例如 : 


<script> 

$ (document) .on ("pageinit", function(){ 

alert ("触发 pageinit 事件 一 一 页 面 已 初始 化 ，DOM 已 加 载 ， 己 完成 页 面 增强 。") 
); 

$ (document) .on ("pagebeforecreate", function(){ 

alert ("触发 pagebeforecreate 事件 一 一 页 面 即 将 初始 化 。 仍 未 开始 增强 页 面 。") ; 
) 7 

$ (document) .on ("pagecreate", function(){ 

alert ("触发 pagecreate 事件 已 创建 页 面 ， 但 增强 未 完成 。") ; 

); 

</script> 








同样 在 通过 Ajax 加 载 外 部 页 面 的 时 候 ， 也 有 三 个 阶段 ， 见 表 9-10 所 示 。 


表 9-10_ 加 载 外 部 页 面 事件 


agebeforeload | 在 任何 页 面 加载 请 求 作出 之 前 触发 


在 页 面 已 成 功 加 载 并 插入 DOM 后 触发 
ageloadfailed 如 果 页 面 加 载 请 求 失败 ， 则 触发 该 事件 。 默 认 情 况 下 将 显示 "ErorLoading Page" 消 息 





例如 : 


<script> 

$ (document) .on ("pageload", function (event, data) { 
alert ("触发 pageload 事件 ! \nURL: " + data.url); 

1); 

$ (document) .on ("pageloadfailed", function (event, data) { 
alert (" 抱 歉 ， 被 请 求 页 面 不 存在 。") ; 

}); 

</script> 





二 


<div data-role="page"> 
<div data-role="header"> 
<h1> 欢 迎 访问 我 的 主页 </h1> 
</div> 





<div data-role="content"> 

<p> 我 是 一 名 移动 开发 者 ! </p> 

<a href="]istview-grid.html"> 外 部 页 面 </a> 
</div> 


<div data-role="footer"> 
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<h1> 页 脚 </h1> 
</div> 
</div> 


运行 效果 如 图 9-18 所 示 。 





欢迎 访问 我 的 主页 
我 是 一 名 移动 开发 者 localhost 上 的 网 页 显示 : x 
外 部 页 面 
钥 发 pageload 事件 ! 


URL: http://localhost/demos/zp/listview-grid.html 


Le | 








图 9-18 jQuery Mobile 页 面 事件 


9.7.2 jQuery Mobile 触 屏 事件 


jQuery Mobile 提供 了 常见 的 触 屏 事件 处 理 机 制 , 常见 的 事件 有 触摸 事件 、 按 住 不 放 事件 、 
向 左 / 右 滑动 事件 ， 我 们 可 以 将 事件 处 理 函 数 绑 定 到 DOM 元 素 上 。 

在 快速 的 一 次 触摸 后 会 触发 tap 事件 ， 在 按 住 不 放 后 (接近 一 秒 钟 的 时 间 ) 会 触发 taphold 
事件 。 例 如 : 


<script> 
$ (document) .on ("pageinit", "#pageone", function (){ 
$("#t1 > p") .on("tap", function(){ 
$ (this) .hide(); 
]) 7 
$("#t2 > p") .on("taphold",function (){ 
$ (this) .hide(); 
]) 7 
1); 
</script> 
<div data-role="content"> 
<div id="t1"> 
<p> 敲 击 我 ， 我 会 消失 。</p> 
<p> 敲 击 我 ， 我 也 会 消失 。</p> 
<p> 敲 击 我 ， 我 还 会 消失 。</p> 
</div> 
<div id="t2"> 
<p> 如 果 您 敲 击 并 保持 一 秒 钟 ， 我 会 消失 。</p> 
<p> 涡 击 并 保持 住 ， 我 会 消失 。</p> 
<p> 敲 击 并 保持 住 ， 我 也 会 消失 。</p> 
</div> 
</div> 


swipeleft 事件 在 用 户 在 某 个 元 素 上 从 左 滑动 超过 30px 时 被 触发 ，swiperight 事件 在 用 户 
在 某 个 元 素 上 从 右 滑 动 超过 30px 时 被 触发 。 例 如 : 
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<body> 
<div role="main" data-role="page" id="pageone"> 
<ul data-role="listview" class="touch" data-icon="false" 
data-split-icon="delete"> 
<1i> 
<a href="#"><img src=" assets/img/apple.png"> 
<p class="topic"><strong>apple</strong></p> 
</a> 
<a href="#" class="delete"> 删 除 </a> 
</1i> 
<1i> 
<a href="#"><img src=" assets/img/galaxy express.png"> 
<p class="topic"><strong>galaxy</strong></p> 
</a> 
<a href="#" class="delete"> 删 除 </a> 
</1i> 
</ul> 


<div id="confirm" class="ui-content" data-role="popup" data-theme="a"> 
<p id="question"> 你 确定 删除 :</p> 
<div class="ui-grid-a"> 
<div class="ui-block-a"> 
<a id="yes" class="ui-btn ui-corner-all ui-mini ui-btn-a" 
data-rel="back"> 是 </a> 
</div> 
<div class="ui-block-b"> 
<a id="cancel" class="ui-btn ui-corner-all ui-mini ui-btn-a" 
data-rel="back"> 否 </a> 
</div> 
</div> 
</div><!-- /popup --> 
</div> 
</body> 
<script> 
$ (document) .on ("pageinit", "#pageone", function (){ 
// 绑 定 事件 
$( document ) .on( "swipeleft swiperight"，"#1ist li", function( event ) { 
var listitem = $( this ); 
// 判 断 事件 
if (event .type === "swipeleft"){ 
confirmAndDelete( listitem); 
} 
]) 7 
// 如 果 不 是 触摸 屏 设备 
if ( ! $.mobile.support.touch ) { 
// 删除 用 来 在 触摸 屏 设备 上 隐藏 删除 按钮 的 类 
$( "#1list" ).removeClass( "touch" ); 
// 绑 定 点 击 删 除 事件 
$( ".delete"™" ) .on( "click", function() { 
Var listitem = $( this ) .parent( "li™ ); 
confirmAndDelete( listitem ); 
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1); 
} 
function confirmAndDeletel( listitem ) { 
// 高 亮 显示 
listitem.children( ".ui-btn" ) .addqdCclass( "ui-btn-active" ); 
// 将 topic 信息 插入 到 pop 窗口 中 
$( "#confirm .topic" ) .remove(); 
listitem.find( ".topic" ).clone().insertAfter( "#question" ); 
// 显示 popup 
$( "#confirm" ).popup( "open™ ); 
// 绑 定 确定 删除 
$( "#confirm #yes" ).on( "click", function() { 
listitem.remove(); 
$( "#1list" ).listview( "refresh" ); 
]) 7 
// 取消 高 亮 和 事件 绑 定 
$( "#confirm #cancel" ) .on( "click", function() { 
listitem.children( ".ui-btn" ) .removeClass( "ui-btn-active" ); 
$( "#confirm #yes" ) .off(); 
1D); 


]) 7 
</script> 


显示 效果 如 图 9-19 所 示 。 





你 确定 删除 : 
apple 





图 9-19 jQuery Mobile 触 屏 事件 


9.7.3 jQuery Mobile 方向 事件 


在 用 户 垂 直 或 水 平 旋转 移动 设备 时 会 触发 orientationchange 事件 。 方 向 会 有 两 种 : portrait 
表示 竖 屏 ，landscape 表示 横 屏 。 
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<script> 
$ (window) .on ("orientationchange", function (event){ 
$ ("#footer") .html ("方向 改变 为 : " + event.orientation); 
]) 7 
</script> 
<div data-role="page"> 
<div data-role="header"> 
<h1>orientationchange 事件 </h1> 
</div> 
<div data-role="content"> 
<p> 请 试 着 旋转 您 的 设备 ! </p> 
<p><b> 注 释 : </b> 您 必须 使 用 移动 设备 或 者 移动 模拟 器 来 查看 该 事件 的 效果 。</p> 
</div> 
<div data-role="footer" id="footer"> 
<h1> 页 脚 文本 </h1> 
</div> 
</div> 


由 于 orientationchange 事件 与 window 对 象 绑 定 ，window.orientation 属性 对 portrait 视图 
返回 0， 对 landscape 视图 返回 90 或 -90。 


本 章 小 结 


本 章 学 习 了 Ajax 的 应 用 场景 ， 使 用 Ajax 加 载 数据 完成 微 博 网 站 中 的 功能 模块 ， 并 向 服 
务 器 提交 数据 保存 到 数据 库 。jQuery Mobile 中 使 用 了 大 量 的 Ajax 技术 来 完成 页 面 的 链接 。 
我 们 不 仅 体会 到 移动 端 Web 开发 的 乐趣 ， 同 时 还 加 深 了 对 jQuery 的 理解 。 


本 章 练习 


1. Ajax 的 使 用 场景 有 哪些 ? 
2. jQuery Mobile 是 什么 ? 
3. jQuery Mobile 有 哪些 优 缺 点 ? 
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ey att ea 一 些 前 端 技术 的 出 现 也 使 得 在 网 
页 中 添加 音效 和 动画 成 为 可 能 。jQuery 通过 少量 的 几 行 代码 ， 就 可 以 实现 元 素 的 飞 动 、 淡 入 
淡出 等 动画 效果 ， 还 可 以 自 定义 各 种 动画 效果 。 

当 我 们 浏览 一 个 网 站 的 时 候 ， 网 站 给 人 的 第 一 印象 就 是 网 站 的 外 观 。 当 我 们 在 电子 商务 
网 站 上 购物 时 ， 网 站 的 互动 型 至 关 重 要 ， 操 作 流 程 过 多 、 用 户 找 不 到 想 要 的 导航 、 广 告 太 多 
等 都 会 导致 用 户 离开 网 页 。UEO 是 英文 User Experience Optimization 的 缩写 ， 把 它 翻 译 成 中 
文 的 意思 是 用 户 体 验 优化 , 也 就 是 网 站 针对 用 户 体 验 来 进行 优化 , 让 用 户 感觉 到 网 站 非常 好 。 
如 何 能 最 大 程度 地 优化 页 面 的 用 户 体验 度 ， 是 每 个 前 端 页 面 开 发 人 员 在 设计 页 面 时 需要 考虑 
的 一 个 重要 问题 。 无 可 置疑 ，jQuery 中 众多 的 动画 与 特效 为 提高 页 面 的 用 户 体验 度 带 来 了 极 
大 的 方便 。 


本 章 内 容 : 
@ 掌握 jQuery 动画 特效 


10.1 jQuery 常用 特效 


10.1.1 显示 和 隐藏 特效 


jQuery 能 够 立即 显示 或 者 隐藏 DOM 元 素 , 使 用 的 方法 分 别 为 show 和 hide 方法 。 例如 : 

$( 'p' ) .hide(); 

$ ('hidden') .show() 

在 传统 的 JavaScript 中 , 需要 改变 元 素 的 display 属性 : 当 隐 藏 元 素 时 会 设置 元 素 的 display 
属性 为 block; 当 显示 元 素 时 会 设置 元 素 的 display 属性 为 none， 此 时 元 素 的 宽度 和 高 度 都 为 
0， 而 不 是 把 元 素 变 为 透明 并 在 页 面 上 留 下 一 片 空 的 区 域 。 

jQuery 的 显示 和 隐藏 也 是 通过 设置 元 素 的 display 属性 来 实现 的 , 并且 我 们 可 以 在 显示 和 
隐藏 元 素 的 时 候 使 用 动画 特效 。 只 需要 在 show 方法 中 传 入 slow、normal 或 fast 参数 即 可 。 
show 方法 的 语法 如 下 所 示 : 


show (duration , [callback]) 


duration 参数 可 以 是 一 个 字符 串 或 者 数字 ， 用 来 表示 动画 执行 的 速度 。 字 符 串 的 取 值 可 
以 是 slow、normal、fast， 其 对 应 的 速度 分 别 是 0.6 秒 、0.4 秒 、0.2 秒 ， 默 认 值 为 0.4 秒 。 如 
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果 我 们 想 更 精确 地 控制 动画 执行 的 时 间 ， 可 以 传 入 一 个 数字 ， 比 如 500， 表 示 该 动画 执行 的 
时 间 为 500 毫秒 。callback 可 选 参数 是 动画 执行 后 立即 执行 的 回调 函数 。 
hide 方法 的 语法 与 show 方法 类 似 ， 参 数 也 都 相同 ， 如 下 所 示 : 


hide (duration , [callback] 





例如 : 


<html> 
<head> 
<meta charset="utf-8" /> 
<script src="http://apps.bdimg.com/libs/jQuery/2.1.1/jQuery.js"></script> 
<style type="text/css"> 

pi 

background: yellow; 

} 
</style> 

</head> 

<body> 
<button id="show"> 显 示 </button> 
<button id="hide"> 隐 藏 </button> 
<p style="display: none">Hello 2</p> 
<script type="text/javascript"> 
$( "#show" ).click(function() { 

$( "p" ) .show( "slow"” ); 
1D); 
$( "#hide" ).click(function() { 

$( "p" ).hide( 3000 ,function() { 

alert ("动画 完成 ."); 

]) 7 
1); 
</script> 

</body> 
</html> 


运行 效果 如 图 10-1 所 示 。 





显示 | 隐藏 | 








图 10-1 显示 和 隐藏 特效 


当 隐 藏 元 素 时 ， 通 常 也 需要 再 把 元 素 显示 在 页 面 上 。 为 了 实现 切换 显示 状态 ， 在 代码 中 
需要 检测 当前 元 素 的 显示 状态 ， 然 后 DO 人 
琐 ， 为 此 ，jQuery 提供 了 toggle0 方 法 ， 该 方法 的 功能 就 是 切换 元 素 的 可 见 状态 ， 即 如 果 是 
示 状 态 ， 则 变 成 隐藏 状态 ， 如 果 是 隐藏 状态 ， 则 变 成 显示 状态 。 例 如 : 


$( "p" ).toggle(); 
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$( "p" ) .toggle( "slow" ); 
$( "p" ) .toggle( 1800 ); 


那么 上 面 使 用 hide 和 show 方法 的 例子 ， 可 以 修改 为 使 用 toggle 方法 ， 代 码 如 下 : 


<html> 
<head> 
<meta charset="utf-8" /> 
<script src="http://apps.bdimg.com/libs/jQuery/2.1.1/jQuery.js"></script> 
<style type="text/css"> 

pi 

background: yellow; 

} 
</style> 

</head> 

<body> 
<button> 切 换 </button> 
<p style="display: none">Hello 1</p> 
<p style="display: none">Hello 2</p> 
<script type="text/javascript"> 
$( "button" ) .click(function() { 

$( "p" ).toggle( "slow",function() { 

alert ("动画 完成 .") ; 

} ) 7 
}) 7 
</script> 

</body> 
</html> 


10.1.2” 淡 入 淡出 特效 

在 桌面 系统 和 PPT 中 淡 入 淡出 效果 比较 常见 , jQuery 可 以 方便 地 为 网 页 提供 淡 入 、 淡 出 
效果 。jQuery 中 对 应 淡 入 效果 的 方法 是 fadeIn 方法 ， 对 应 淡出 效果 的 方法 是 fadeTo 方法 。 与 
show0 和 hide0 方 法 比较 ，fadeln 和 fadeOut 方法 不 是 改变 元 素 的 width 与 height 属性 ， 而 是 


改变 元 素 的 透明 度 。 
包 dem 方法 的 语法 为 : 





fadeIn ( [duration ] [,callback ] ) 


duration 参数 可 以 是 一 个 字符 串 或 者 数字 ， 用 来 表示 动画 执行 的 速度 。 字 符 串 的 取 值 可 
以 是 slow、normal、fast， 其 对 应 的 速度 分 别 是 0.6 秒 、0.4 秒 、0.2 秒 ， 默 认 值 为 0.4 秒 。 如 
果 我 们 想 更 精确 地 控制 淡 入 特效 的 执行 时 间 ， 可 以 传 入 一 个 数字 。 

fadeOut 方法 的 语法 为 : 





fadeout ( [duration ] [,callback ] ) 


例如 : 


S$ ("#divi") .fadeIn(); 
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$("#div2") .fadeIn ("slow"); 
$("#div3") .fadeOut (3000); 


下 面 我 们 来 实现 一 个 图 片 淡 入 淡出 的 案例 ， 效 果 如 图 10-2 所 示 。 


一 人 





图 10-2 淡 入 淡出 特效 


通过 淡 入 淡出 效果 显示 不 同 的 图 片 ， 并 且 当 显示 到 最 后 一 张 图 片 时 自动 循环 从 第 一 张 图 
片 显示 。 如 果 要 实现 这 个 功能 ， 除 了 用 到 fadeIn 和 fadeOut 方法 外 ， 还 要 使 用 jQuery 选择 器 
选择 下 一 张 图 片 ( 或 者 第 一 张 图 片 ), 为 了 不 间断 地 循环 执行 ， 还 会 使 用 到 setInterval 函数 。 具 
体 实现 的 代码 如 下 所 示 : 


<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8" /> 

<script src="http://apps.bdimg.com/libs/jQuery/2.1.1/jQuery.js"></script> 

<style type="text/css"> 

header{ 

background:#fff ; 

float:right; 

position:relative; /* 相对 定位 ， 作 为 绝对 定位 的 img 的 父 级 */ 

} 

header img { 

vertical-align:top; /** 兼容 IE6， 去 掉 IE6 中 img 下 面 有 空隙 **/ 

position:absolute; /** 绝对 定位 ， 所 有 的 图 片 都 显示 在 同一 个 位 置 **/ 

right:0; 

} 

</style> 

</head> 

<body> 

<header> 
<img alt=" 布 宜 诺 斯 艾 利 斯 " src=" assets/img/buenosaires.jpg"> 
<img alt=" 开 普 敦 " src="_ assets/img/capetown.jpg"> 
<img alt=" 纽 约 " src=" assets/img/newyork.jpg"> 
<header> 
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</body> 
<script> 
$ (function(){ 
// 先 隐藏 所 有 图 片 ， 再 将 对 象 移 到 第 一 张 图 片 ， 使 之 淡 入 
$ ("header img") .fadeOut (0) .eq(0) .fadeIn (0); 
// 初 始 化 图 片 的 索引 值 
var i = 0; 
//setInterval 是 每 隔 一 段 时 间 循 环 一 个 动作 
setInterval (function(){ 
// 判 断 是 否 执行 到 最 后 一 张 图 片 
if($ ("header img") .length > (i+1)){ 
// 索 引 值 为 奔 的 图 片 淡出 ， 它 的 下 一 张 图 片 淡 入 
$ ("header img") .eq(i) .fadeout (2000) .next ("img") .fadeIn (2000); 
// 使 索引 值 增加 1， 下 一 次 执行 动作 的 图 片 索引 值 为 i+1 
bE 
} 
else{// 如 果 为 最 后 一 张 图 片 ， 将 执行 下 面 的 代码 
// 索 引 值 为 i 的 图 片 淡出 ， 这 里 不 同 于 上 面 ， 是 第 一 张 图 片 淡 入 
$ ("header img") .eq(i) .fadeOut (2000) .siblings ("img") .eq(0) .fadeIn (2000); 
i = 0;// 将 索引 值 变 为 0， 回 到 初始 状态 
} 
} ,3000) ;//3000ms 执行 一 次 淡 入 淡出 的 动作 
}) 
</script> 
</html> 


上 面 的 代码 使 用 $(header img") 选 定 对 应 的 img 数组 ; 通过 eqGD) 选 择 数组 中 的 一 张 图 片 ; 
fadeOut(2000) 设 定时 间 为 2 秒 的 淡出 效果 ;使 用 next("img") 改 变 对 象 ， 将 操作 对 和 象 移 到 下 一 
张 图 片 ，fadeIn(2000) 设 定时 间 为 2 秒 的 淡 入 效果 。 同 时 我 们 使 用 链 式 操作 写 在 一 行 : 

$ ("header img") .eq(i).fadeOut (2000) .next ("img") .fadeIn (2000) 

jQuery 还 提供 了 fadeTo 方法 以 调整 元 素 的 透明 度 , 并 且 以 动画 的 效果 调整 到 指定 的 不 透 
明度 值 。 因 为 adeIn 和 fadeOut 方法 只 能 将 元 素 的 透明 度 设置 为 1 或 0, 所 以 如 果 想 制作 半 透 
明 特 效 ， 应 该 使 用 fadeTo 方法 。 例 如 : 


$( "p" ) .fadeTo( "slow", 0.33 ); 





fadeTo 方法 的 语法 为 : 

fadeTo (duration, opacity, [callback]) 

参数 speed 为 动画 效果 的 速度 ， 参 数 opacity 为 指定 的 不 透明 值 ， 取 值 范围 是 0.0 到 1.0， 
可 选项 参数 callback 为 动画 完成 时 执行 的 函数 。 
10.1.3 ”滑动 特效 

我 们 注意 到 在 show 和 hide 方法 特效 执行 的 时 候 , 实际 上 是 同时 改变 元 素 的 高 度 和 宽度 。 
如 果 我 们 只 想 使 用 改变 高 度 的 效果 来 显示 元 素 ， 就 应 该 使 用 jQuery 提供 的 slideDown 和 
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slideUp 方法 。 
slideDown 方法 以 动画 的 效果 将 所 选择 元 素 的 高 度 向 下 滑动 增加 ， 它 的 语法 如 下 : 


slideDown (duration, [callback]) 
slideUp 方法 以 动画 的 效果 将 所 选择 元 素 的 高 度 向 上 滑动 减少 ， 它 的 语法 如 下 : 
slideUp (duration, [callback]) 


例如 : 


<html> 
<head> 
<meta charset="utf-8" /> 
<script src="http://apps.bdimg.com/libs/jQuery/2.1.1/jQuery.js"></script> 
<style type="text/css"> 
.SlideDownbox, .slideUpbox, .slideTogglebox{ 
float:left; 
padding:8px; 
margin:16px; 
border:1px solid red; 
width:200px; 
height:50px; 
background-color:#000000; 
color:white; 
} 
.clear{ 
clear:both; 
} 
</style> 
</head> 
<body> 
<h1l>jQuery slideUp(), slideDown()</h1l> 
<div class="clear"> 
<h2>slideDown() example</h2> 
<div class="slideDownbox"> 
Click me - slideDown() 
</div> 
<div class="slideDownbox"> 
Click me - slideDown() 
</div> 
</div> 
<div class="clear"> 
<h2>slideUp() example</h2> 
<div class="slideUpbox"> 
Click me - slideUp() 
</div> 
<div class="slideUpbox"> 
Click me - slideUp() 
</div> 
</div> 
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<br/><br/> 
<div class="clear"> 
<button id="reset">Reset</button> 
</div> 
<script type="text/javascript"> 
$(".slideDownbox") .click (function () { 
$ (this) .hide() .slideDown('slow'); 
}); 
$(".slideUpbox") .click (function () { 
$ (this) .slideUp (2000); 
}); 
$ ("#reset") .click (function(){ 
location.reload(); 
}); 
</script> 
</body> 
</html> 


运行 效果 如 图 10-3 所 示 。 





slideDown() example 





Reset 














图 10-3 ”滑动 特效 


像 toggle 方法 能 够 自动 切换 显示 状态 一 样 , jQuery 提供 的 slideToggle 方法 也 能 够 根据 当 
前 元 素 的 显示 状态 ， 使 用 滑动 效果 自动 进行 切换 。 它 的 语法 为 : 


slideToggle (duration, [callback]) 


例如 : 


<html> 
<head> 
<meta charset="utf-8" /> 
<script src="http://apps.bdimg.com/libs/jQuery/2.1.1/jQuery.js"></script> 
<style type="text/css"> 
.SlideDownbox, .slideUpbox, .slideTogglebox{ 

float:left; 

padding:8px; 

margin:16px; 

border:1lpx solid red; 
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width:200px; 
height:50px; 
background-color:#000000; 
color:white; 
} 
-Cleari 
clear:both; 
} 
</style> 
</head> 
<body> 
<hl>slideToggle() example</h1> 
<div class="clear"> 
<h2>slideToggle() example</h2> <buttonid=slideToggle>slideToggle()</button> 
<br/> 
<div class="slideTogglebox"> 
slideToggle() 
</div> 
<div class="slideTogglebox"> 
slideToggle() 
</div> 
</div> 
<br/><br/> 
<div class="clear"> 
<button id="reset">Reset</button> 
</div> 
<script type="text/javascript"> 
$ ("#slideToggle") .click(function () { 
$('.slideTogglebox') .slideToggle(); 
]) 7 
$("#reset") .click (function(){ 
location.reload(); 
}); 
</script> 
</body> 
</html> 


运行 效果 如 图 10-4 所 示 。 
slideToggle() example 
slideToggle0) 











Reset 











图 10-4 slideToggle 方法 的 运行 效果 
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10.2 创建 自 定义 动画 


10.2.1 基本 自 定义 动画 


jQuery 还 提供 了 更 灵活 的 创建 动画 的 方式 ， 那 就 是 自 定义 动画 。 通过 使 用 animate 方法 ， 
我 们 可 以 设置 动画 运行 的 一 些 高 级 属性 ， 也 就 能 创建 出 更 复杂 、 更 优雅 的 动画 了 。 
animate 方法 的 语法 格式 如 下 : 


animate( properties, [ duration ], [ easing ], [ callback ] ) 


其 中 , 参数 properties 表示 动画 改变 的 目的 属性 样式 和 值 的 集合 。 可 选 参数 duration 表示 
三 种 默认 的 速度 (slow、nonmal、fast) 或 自 定义 的 数字 。 可 选 参数 easing 用 于 控制 动画 的 表现 
效果 , 通常 有 linear 和 swing 字符 值 。 可 选 参数 callback 为 动画 完成 后 执行 的 回调 函数 。 我 们 
前 面 学 习 的 动画 特效 都 是 基于 此 函数 实现 的 。 

比如 ， 我 们 使 用 animate 方法 来 实现 改变 宽度 、 透 明度 的 动画 效果 ， 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8" /> 

<script src="http://apps.bdimg.com/libs/jQuery/2.1.1/jQuery.js"></script> 

<title>animate</title> 

<style type="text/css">#content {background-color:#fa0;width:300px; 
height:30px;padding:3px}</style> 

</head> 

<body> 

<input type="button" id="animate" value="Animate"> 

<div id="content">Animate Height</div> 

<script> 





$("#animate") .click (function() { 
$ ("#content") .animate ( 
{"height": "80px"}, 
ed ah 
}); 
$("#animate") .click (function() { 
$ ("#content") .animate( 
onacity"s "O15 
"slow"); 
1D); 
</script> 
</body> 
</html> 


运行 效果 如 图 10-5 所 示 。 
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Animate 





图 10-5 animate 方法 的 运行 效果 


通过 使 用 animate 方法 ， 我 们 可 以 移动 元 素 的 位 置 ， 例 如 : 


<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8" /> 

<script src="http://apps.bdimg.com/libs/jQuery/2.1.1/jQuery.js"></script> 
<title>animate</title> 

<style>#content {background-color:#68f;position:absolute;width:100px;height: 





100px;padding:3px;margin-top:S5px;left:100px}</style> 
</head> 
<body> 
<input type="button" id="left" value="Left"> 
<input type="button" id="right" value="Right"> 
<div id="content">Move</div> 
<script> 
$("#right") .click(function() { 
$("#content") .animate( 
{"left": "+=150px"}, 
walow)s 
]) 7 
$("#left") .click (function() { 
$("#content") .animate( 
{"left": "-=150px"}, 
"slow"); 
1); 
</script> 
</body> 
</html> 


在 上 面 的 代码 中 ， 设 置 元 素 目标 位 置 时 使 用 了 表达 式 ， 点 击 按钮 后 方块 会 移动 150 个 像 
运行 效果 如 图 10-6 所 示 。 


[ier | [Right 








图 10-6 animate 使 用 了 表达 式 
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10.2.2 自 定义 动画 的 回调 函数 


同样 地 ， 在 animate 方法 中 我 们 也 可 以 设置 回调 函数 ， 以 记录 动画 执行 完成 ， 并 执行 后 
续 的 操作 。 例 如 : 


<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8" /> 

<script src="http://apps.bdimg.com/libs/jQuery/2.1.1/jQuery.js"></script> 
<title>animate</title> 


<style type="text/css">#content {background-color:#fa0;width:300px; 





height:30px;padding:3px}</style> 
</head> 
<body> 
<input type="button" id="animate" value="Animate"> 
<div id="content">Animate Height</div> 
<script> 
$("#animate") .click (function() { 
$("#content") .animate( 
{"height": "100px", "width": "250px"}, 
"slow", function(){ 
$ (this) .html ("Animation Completed"); 
1D); 
}) 7 
</script> 
</body> 
</html> 


运行 效果 如 图 10-7 所 示 。 





图 10-7 animate 回调 


10.2.3 ”动画 队列 


只 使 用 一 个 动画 效果 制作 不 出 新 颖 的 动画 ， 复 杂 的 动画 通常 都 需要 由 多 个 动画 效果 组 
成 。 如 何 控制 一 个 元 素 执行 多 个 动画 效果 呢 ? jQuery 使 用 队列 的 概念 对 多 个 动画 效果 进行 排 
队 , 形成“ 队列”, 执行 的 时 候 也 按照 “队列 ”的 顺序 播放 动画 。jQuery 定义 了 全 局 的 queue、 
dequeue 函数 ， 在 jQuery 对 象 上 则 定义 了 queue、dequeue、delay、clearQueue 等 方法 。 
jQuery.queue 的 语法 格式 如 下 : 














jQuery.queue( element [, queueName ] [，callback ]) 
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element 是 DOM 元 素 对 象 ，queueName 表示 队列 的 名 称 ， 默 认 是 你。callback 是 添加 到 
队列 的 函数 或 函数 数组 。 如 果 callback 对 象 为 函数 ， 则 将 此 函数 追加 到 队列 中 ; 如 果 callback 
对 象 为 函数 数组 ， 则 将 使 用 此 数组 蔡 换 队列 中 的 内 容 。 如 果 省 略 callback 参数 ，jQuery.queue 
方法 会 返回 队列 中 指定 元 素 的 回调 函数 数组 。 例 如 : 


var element = $( "div" )[ 0 ]; 

function cbl() {alert (1)} 

function cb2() {alert (2)} 

function cb3() {alert (3)} 

var arr = [cb3, cb2]; 

$.queue (element ， 'foo'，cbl); // 第 三 个 参数 为 function 

$.queue (element ，'foo'，arr); // 第 三 个 参数 为 数组 

console.1og($.queue (element ， 'foo')); 

// 输 出 [function, function]0: function cb3() {alert (3)}1: function cb2() {alert (2)} 





jQuery.dequeue 的 语法 格式 如 下 : 
jQuery.dequeue( element [, queueName ] ) 
比如 在 上 面 的 代码 基础 上 ， 我 们 执行 下 面 的 代码 : 
$.dequeue (element ， 'foo'); 


将 会 得 到 如 图 10-8 所 示 的 效果 。 


JavaScript 提醒 


3 








图 10-8 ”dequeue 的 效果 


可 见 ， 如 果 不 执行 dequeue， 那 么 队列 中 的 下 一 个 函数 永远 不 会 执行 。 
相 比 之 下 , 在 jQuery 对 象 上 调用 queue 和 dequeue 方法 更 为 常用 , 在 jQuery 对 象 上 调用 
queue 方法 和 dequeue 方法 的 语法 格式 如 下 : 


queue( [queueName ][, callback] ) 
dequeue( [queueName ] ) 


它们 的 参数 与 对 应 的 全 局 函数 的 参数 说 明 一 致 。 
例如 : 


<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8" /> 

<script src="http://apps.bdimg.com/libs/jQuery/2.1.1/jQuery.js"></script> 
<title>animate</title> 

<style type="text/css"> 
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div { 
margin: 3px; 
width: 40px; 
height: 40px; 
position: absolute; 
left: Opx; 
top: 30px; 
background: green; 
display: none; 
} 
div.newcolor { 
background: blue; 
}</style> 
</head> 
<body> 
<p> 队 列 的 长 度 是 : <span></span></p> 
<div></div> 
<script> 
var div = $( "div" ); 
function runIt() { 
div.show( "slow" ) 
.animate({ left: "+=200" }, 2000 ) 
.slideToggle( 1000 ) 
.SlideToggle( "fast" ) 
.animate({ left: "-=200" }, 1500 ) 
.hide( "slow" ) 
.show( 1200 ) 
.slideUp( "normal", runIt ); 
} 
function showIt() { 
var n = div.queue( "fx" ); 
$( "span" ) .text( n.length ); 
setTimeout ( showIt, 100 ); 
} 
runIt (); 
ShowIt () 7 
</ Script> 
</body> 
</html> 


在 runIt0 函 数 中 ， 我 们 在 div 元 素 上 添加 了 许多 动画 效果 ， 也 就 是 在 队列 中 增加 了 许多 
回调 函数 ， 当 最 后 一 个 动画 执行 完毕 的 时 候 再 一 次 调用 ranIt0 函 数 ， 这 样 整个 动画 效果 会 特 
环 执 行 。 同 时 用 showIt0 函 数 检测 当前 队列 中 待 执行 的 回调 函数 的 个 数 。 运 行 效 果 如 图 10-9 
所 示 。 





The 六 length is: 4 





图 10-9 检测 队列 中 动画 的 个 数 
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有 时 需要 停止 执行 队列 总 剩余 的 动作 或 动画 ， 我 们 可 以 调用 clearQueue0 方 法 清空 队列 。 








例如 : 


SC "div® ) 
-queue ( "fx", function( next ) { 
console.1og(“" 在 fx 队列 中 " ); 
二 | 
-ClearQueue( "fx" ) 
.dequeue( "fx" ); 


上 面 的 代码 不 会 执行 输出 语句 ， 因 为 已 经 清空 队列 了 。 
还 可 以 将 队列 中 的 函数 延 时 执行 ，delay0 函 数 的 语法 格式 如 下 所 示 : 


delay (duration [,queueName]) 
delay0 函 数 设 置 一 个 延 时 来 推迟 执行 队列 中 之 后 的 动画 。 例 如 : 
$( "div " ).slideUp( 300 ) .delay( 500 ) .fadeIn( 400 ); 


上 面 的 代码 在 向 上 滑动 效果 和 淡 入 效果 之 间 会 暂停 500 毫秒 。 


10.2.4 停止 特效 


所 有 其 他 的 动画 。 


jQuery 提供 了 stop0 函 数 用 于 停止 特效 。 语 法 为 : 

stop( [queue ] [, clearQueue ] [, jumpToEnd ] ) 

当 在 DOM 元 素 上 调用 此 方法 时 ， 当 前 正在 执行 的 动画 会 立即 停止 ， 回 调 函数 也 不 会 触 
。 当 DOM 元 素 中 有 多 个 动画 方法 被 调用 时 ， 下 一 个 动画 方法 会 立即 执行 。 

第 一 个 参数 表示 队列 名 。 

第 二 个 参数 如 果 指定 为 tue， 则 不 仅 停止 当前 动画 ， 而 且 停止 在 动画 队列 中 等 待 执行 的 


第 三 个 参数 如 果 指 定 为 rue， 则 会 直接 执行 到 当前 动画 的 结束 状态 ， 比 如 .slideUp0 动 画 











执行 的 时 候 调用 stop， 那 么 元 素 会 马上 隐藏 ， 回 调 函数 也 会 马上 执行 。 





例如 : 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<script src="http://apps.bdimg.com/libs/jQuery/2.1.1/jQuery.js"></script> 
<title>animate</title> 
<style type="text/css"> 
div { 
margin: 3px; 
width: 40px; 
height: 40px; 
position: absolute; 
left: Opx; 
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top: 30px; 
background: green; 
display: none; 

} 

div.newcolor { 
background: blue; 


}</style> 
</head> 
<body> 
<button id="start">Start</button> 
<button idq="stop1">Stop ()</button> 
<button idq="stop2">Stop (true)</button> 





<button id="stop3">Stop (truevtrue)</button> 
<div></div> 
<script> 
$( "#start" ).click(function() { 
SC "iy 
.Show( "slow"” ) 
-animate({ left: "+=200" }, 5000 ) 
.queue (function() { 
$( this ).addClass( "newcolor" ) .dequeue(); 
} 
.animate({ left: '-=200' }, 1500 ) 
.queue (function() { 
$( this ) .removeClass ( "newcolor" ) .dequeue(); 
} 
.slideUp(); 
); 
$( "#stopl" ).click(function() { 
$( "div" ) 
.stop(); 
} 
$( "#stop2" ) .click(function() { 
$( "div" ) 
-Stop (true); 
); 
$( "#stop3" ).click(function() { 
SY "di 
.Stop (true, true); 





) 


</script> 

</body> 

</html> 

效果 如 图 10-10 所 示 。 








Start | | Stop0 | | Stopttue) | | Stop(true,true) | 


图 10-10 停止 特效 














在 上 面 的 代码 中 ， 点 击 Start 按钮 后 ， 会 再 添加 多 个 动画 特效 ， 这 里 还 结合 了 改变 div 元 
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素 的 颜色 ， 使 用 了 下 面 的 代码 : 


-queue (function () { 











$( this ) .addClass( "newcolor" ) .dequeue(); 
}) 


在 队列 中 加 入 函数 处 理 , 而 且 在 函数 处 理 中 调用 了 dequeue0 方 法 ,这样 就 会 调用 队列 中 
后 一 个 动画 特效 (函数 )， 形 成 一 段 连贯 的 动画 。 整 个 效果 就 是 首先 显示 div 元 素 , 然后 向 右 动 
200 像素 ， 然 后 改变 div 元 素颜 色 为 蓝 色 ， 然 后 向 左 移动 200 像素 ， 继 续 改 变 div 元 素颜 色 为 
绿色 ， 最 后 滑动 隐藏 div 元 素 。 我 们 增加 了 三 个 按钮 ， 分 别 调用 stop 函数 停止 动画 ， 但 是 使 
用 的 参数 不 同 ， 得 到 的 停止 动画 的 效果 也 不 同 。 第 一 个 Stop 按钮 只 会 停止 当前 动画 ,第 二 个 
Stop 按钮 则 会 停止 当前 动画 和 队列 中 的 所 有 动画 ， 第 三 个 按钮 则 会 直接 执行 到 当前 动画 的 结 
束 状态 并 不 执行 队列 中 的 后 续 动画 。 

在 人 人 微 博 网 站 中 ， 我 们 可 以 为 微 博文 章 设置 淡 入 淡出 效果 或 者 其 他 效果 。 

jQuery 前 端 动画 的 原理 是 通过 一 个 定时 器 setInterval 每 隔 一 定时 间 来 改变 元 素 的 样式 ， 
动画 结束 时 使 用 clearInterval 即 可 。jQuery 动画 虽然 易 用 高 效 ， 但 是 性 能 上 存在 问题 。 一 般 
需要 结合 其 他 的 动画 实现 方式 一 起 使 用 ， 如 CSS3 中 对 动画 的 支持 。 


10.3 综合 案例 赏析 








下 面 我 们 来 模仿 实现 手机 端的 一 些 动 画 特 效 , 在 Chrome 浏览 器 中 打开 页 面 , 如 图 10-11 
所 示 。 





图 10-11 案例 效果 图 


当 我 们 单 击 左上 角 的 按钮 的 时 候 ， 内 容 会 滑动 到 屏幕 右 侧 并 缩小 显示 ， 同 时 一 个 导航 列 
会 显示 在 屏幕 左 侧 ， 最 上 方 的 状态 条 也 会 改变 。 
当 单 击 导航 或 内 容 时 ， 也 会 以 动画 效果 隐藏 导航 栏 并 显示 内 容 页 。 我 们 使 用 的 图 片 资源 
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如 图 10-12 所 示 。 





backgroundjpg blurjpg dirde.png iphone.png screenjpg statusblackpn status white.pn 
9 9 





图 10-12 案例 资源 


HTM5 网 页 代码 如 下 : 


<html> 
<head> 
<title></title> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1 
maximum-scale=1, user-scalable=no"> 
<link rel="stylesheet" type="text/css" href="style.css" /> 
</head> 
<body> 
<div class="background"> 
<div class="iphone"> 
<div class="screen"> 
<div class="menu"> 
<ul> 
<li><a href="">Home</a></1i> 
<li><a href="">What's New</a></1i> 
<1i><a href=""> 流 行 </a></1i> 









<1i><a href=""> 活 动 </a></1i> 
<1i><a href=""> 聊 天 </a></1i> 
<1i><a href=""> 周 围 </a></1i> 
<1i><a href=""> 帮 助 </a></1i> 
<1i><a href=""> 登 出 </a></1i> 
</ul> 
</div> 


<div class="status"></div> 
<div class="content "> 
<div class="button"></div> 
</div> 
</div> 
</div> 
</div> 
<script src="http://code.jQuery.com/jQuery-latest.min.js"></script> 
<script src="menu.js"></script> 
</body> 
</html> 














在 内 容 区 域 我 们 使 用 screen.jpg 作为 背景 图 片 ， 增 加 <div class="button"></div> 作 为 按钮 
区 域 。 通 过 分 析 ， 我 们 需要 两 个 动画 效果 : 我 们 命名 “动画 1” 为 内 容 页 的 隐藏 和 导航 栏 的 
显示 ， 命 名 “动画 2” 为 导航 栏 的 隐藏 和 内 容 页 的 显示 。 有 具体 见 样式 文件 ， 代 码 如 下 : 
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/* 基本 的 复位 和 通用 */ 

党 ,这 
margin: Opx; 
padding: Opx; 

} 

html, body { 
min-width: 435px; 
min-height: 1000px; 
-webkit-touch-callout: none; 
-webkit-user-select: none; 
-khtml-user-select: none; 
-moz-user-select: none; 
-ms-user-select: none; 
user-select: none; 


div.background { 
position: absolute; 
top: Opx; left: Opx; 
min-width: 435px; 
min-height: 1000px; 
height: 100%; width: 100%; 
background: #408dce url ('img/background.jpg') no-repeat center center; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
} 
/* 设备 */ 
div.iphone { 
height: 810px; width: 435px; 
position: absolute; 
margin: auto; 
top: Opx; bottom: 80px; left: Opx; right: Opx; 
background: url('img/iphone.png') no-repeat center center; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-0o-background-size: cover; 
background-size: cover; 


div.screen { 
height: 568px; width: 320px; 
position: absolute; 
top: 119px; left: 59px; 
overflow: hidden; 
position: relative; 

} 

/* 内容 */ 

div.menu { 
position: absolute; 
height: 100%; width: 100%; 
background: url('img/blur.jpg') no-repeat center center; 
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—webkit-background-size: cover; 
-moz-background-size: cover; 


-o-background-size: cover; 


background-size: 


div.menu ul { 
width: 600px; 
list-style: none; 


Cover; 


margin: 95px Opx Opx 75px; 


} 

div.menu 1i { 
font-weight: 200; 
font-size: 19px; 
line-height: 19px; 


margin-bottom: 28px; 


/* ”隐藏 导航 */ 


-webkit-transition: all 400ms ease-in-out, opacity 1000ms 
-moz-transition: all 400ms ease-in-out, opacity 1000ms 
-ms-transition: all 400ms ease-in-out, opacity 1000ms 
-o-transition: all 400ms ease-in-out, opacity 1000ms 
transition: all 400ms ease-in-out, opacity 1000ms 


-webkit-transform: 
-moz-transform: 
transform: 
opacity: 0; 
} 
div.menu li.visible { 
/* ”显示 导航 */ 
-webkit-transform: 
-moz-transform: 
transform: 
opacity: 1; 
} 


div.menu li a f{ 


scale (0.2); 
scale (0.2); 
scale(0.2); 


scale(1); 
scale(1); 
scale(1); 


color: rgba(255,255,255,0.9); 
text-decoration: none; 


} 

status { 

position: absolute; 
top: Opx; left: Opx; 
z-index: 200; 
height: 20px; width: 


div. 


100%; 


eaSe7 
eaSe7 
eaSe7 
eaSe7 
eaSe7 


background: url('img/status _ black.png") no-repeat center center; 


-webkit-background-size: cover; 


-moz-background-size: cover; 


-o-background-size: cover; 


background-size 


} 


div.status.active { 


: Cover; 


background-image: url('img/status white.png'); 
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div.content { 
position: absolute; 
top: Opx; left: Opx; 
height: 568px; width: 320px; 
background: #fff url('img/screen.jpg') no-repeat center center; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
-webkit-transition: all 300ms ease-in-out; 
-moz-transition: all 300ms ease-in-out; 
-ms-transition: all 300ms ease-in-out; 
-o-transition: all 300ms ease-in-out; 
transition: all 300ms ease-in-out; 
-webkit-backface-visibility: hidden; 


/* ”隐藏 内 容 页 */ 
div.content.inactive { 
cursor: pointer; 
-webkit-transform: translate(160px, Opx) scale(0.5); 
-moz-transform: translate(160px, Opx) scale(0.5); 
-ms-transform: translate(160px, Opx) scale(0.5); 
transform: translate(160px, Opx) scale(0.5); 
} 
div.button { 
width: 30px; height: 30px; 
position: absolute; 
top: 23px; left: 3px; 
cursor: pointer; 


} 


在 上 面 的 代码 中 ， 我 们 使 用 -webkit-transform:scale(0.2) 隐 藏 导航 ， 使 用 -webkit-transform: 
scale(1) 显 示 导 航 。div.content.inactive 类 的 内 容 为 隐藏 内 容 页 的 动画 效果 。 
JavaScript 代码 如 下 : 


/* ”显示 导航 */ 
$('div.button') .on('click', function(){ 
// 检 测 内 容 页 是 否 在 前 面 
if( !$('div.content') .hasClass('inactive') ){ 
// 滑动 并 缩小 内 容 页 
$('div.content') .addClass('inactive'); 
setTimeout (function(){ $('div.content') .addCclass('flag'); }, 100); 


// 改变 手机 状态 条 为 黑色 
$('div.status') .fadeOut (100, function(){ 
$ (this) .toggleClass('"'active') .fadeIn(300); 
Fs 
// 有 时 间 差 的 为 导航 中 选项 添加 动画 效果 
Var timer = 0; 
$.each($('1i'), function(i,v){ 
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他 





加 了 flag 类 作为 标识 以 


timer = 40 * i; 
setTimeout (function(){ 
$(v) .addClass('visible'); 


}, timer); 


} 
DD); 
/* ”隐藏 导航 并 显示 内 容 页 */ 
function closeMenu() { 
// 以 动画 效果 显示 内 容 
$('div.content') .removeClass('inactive flag'); 
// 改变 状态 条 为 白色 
$('div.status') .fadeOut (100, function(){ 
$ (this) .toggleClass ('active') .fadeIn (300); 
]) 7 
// 隐 藏 导航 
setTimeout (function(){ 
$('1i') .removeClass('visible'); 
}: 300}» 
} 
// 内 容 点 击 
$('div.content') .on('click', function(){ 
if( $('div.content') .hasClass('flag') ){ 
closeMenu (); 
} 
}) 7 
// 导 航 点 击 
$('1li a').on('click', function(e){ 
e.preventDefault (); 
closeMenu(); 


1D); 


在 上 面 的 代码 中 添加 了 单 击 内 容 页 返回 按钮 的 事件 、 单 击 内 容 页 的 事件 、 单 击 导航 的 事 





本 章 小 结 


件 。 内 容 页 返回 按钮 的 事件 会 触发 “动画 1” 效 果 ， 单 击 内 容 页 的 事件 和 单 击 导航 的 事件 会 
发 “动画 2” 效 果 。 为 了 在 内 容 页 显示 在 最 前 面 时 单 击 内 容 页 的 事件 不 执行 动画 ， 我 们 添 
区 别 。 至 此 我 们 就 完成 了 既 好 看 又 实用 的 动画 效果 。 


本 章 介绍 了 jQuery 对 动画 特效 的 支持 , 从 立即 显示 隐藏 元 素 到 有 动画 效果 地 显示 隐藏 元 
素 ， 还 介绍 了 人 允许 创建 自 定义 动画 的 animate 方法 ， 你 还 了 解 到 jQuery 的 队列 函数 以 及 如 何 
将 动画 排队 以 串 行 方式 执行 。 
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本 章 练习 














1. 使 用 jQuery 如 何 实现 动画 特效 ? 
2. 请 介绍 jQuery 中 的 队列 函数 。 


接口 说 明 


附录 A 服务 端 接口 


A.1 新 增 用 户 


: 新 增 用 户 。 


URL: http://localhost:8080/rrwb/crud/user/add。 
HTTP 请 求 方式 : POST/GET。 


请 求 参数 


: 如 表 A-l 所 示 。 


表 A-1_ 新 增 用 户 的 请 求 参 数 


























参数 名 称 说 明 
login_name 登录 名 ， 必 输 
nick_name 昵称 ， 必 输 
i 纺 咯 图 地 址 
real_name 真实 姓名 
provinceValue 所 在 省 份 编号 

rovinceName 所 在 省 份 名 称 
cityValue 所 在 城市 编号 
cityName 所 在 城市 名 称 
gender String 性 别 
age String 年 龄 
other_email String 备用 邮箱 
blog String 博客 地 址 
qq Strng QQ 
pwd String 密码 ， 必 输 
birthday String 生日 

响应 参数 : 如 表 A-2 所 示 。 
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表 A-2 新 增 用 户 的 响应 参数 





























参数 名 称 明 
code 
A2 编辑 用 户 个 人 信息 
接口 说 明 : 编辑 用 户 个 人 信息 。 
URL: http://localhost:8080/rrwb/crud/user/edit。 
HTTP 请 求 方式 : POST/GET。 
请 求 参数 : 如 表 A-3 所 示 。 
表 A-3 编辑 用 户 个 人 信息 的 请 求 参数 
参数 名 称 类 型 说 ”了 明 
login name String 登录 名 ， 必 办 
nick_name String 昵称 ， 必 输 
im Strin 缩 略 图 地 址 
Teal name String 真实 姓名 
provinceValue String 所 在 省 份 编号 
provinceName String 所 在 省 份 名 称 
cityValue String 所 在 城市 编号 
cityName String 所 在 城市 名 称 
gender String 性 别 
age String 年 龄 
other_email String 备用 邮箱 
blog String 博客 地 址 
qq Strng QQ 
pwd String 密码 ， 必 输 
msn String MSN 
birthday String 生日 
响应 参数 : 如 表 A-4 所 示 。 
表 A-4 编辑 用 户 个 人 信息 的 响应 参数 
参数 名 称 类 型 说 明 
0: 插入 失败 


Number 
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A.3 根据 用 户 ID 查询 用 户 


接口 说 明 : 根据 用 户 ID 查询 用 户 。 

URL: http://localhost:8080/rrwb/crud/user/edit。 
HTTP 请 求 方式 : POST/GET。 

请 求 参数 : 如 表 A-5 所 示 。 


表 A-5 根据 用 户 ID 查询 用 户 的 请 求 参数 
参数 名 称 类 型 说 ”了 明 





id Number 用 户 人 DD， 必 和 输 


响应 参数 : 如 表 A-6 所 示 。 


表 A-6 根据 用 户 ID 查询 用 户 的 响应 参数 
参数 名 称 
0: 插入 失败 
1: 插入 成 功 


A.4 根据 用 户 登录 名 查找 用 户 


code Number 





接口 说 明 : 根据 用 户 登录 名 查找 用 户 。 

URL: http://localhost:8080/rrwb/crud/user/findUserByName. 
HTTP 请 求 方 式 : POST/GET。 

请 求 参数 : 如 表 A-7 所 示 。 


表 A-7_ 根 据 用 户 登 录 名 查找 用 户 的 请 求 参数 
参数 名 称 类 型 说 ”了 明 





login_name Strin 登录 名 ， 必 输 


响应 参数 : 如 表 A-8 所 示 。 


表 A-8_ 根 据 用 户 登 录 名 查找 用 户 的 响应 参数 
参数 名 称 类 型 说 ”了 明 





0: 插入 失败 
1: 插入 成 功 
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A.5 根据 用 户 昵称 查找 用 户 








接口 说 明 : 根据 用 户 昵称 查找 用 户 。 

URL: http://localhost:8080/rrwb/crud/user/ findUserByNickName.。 
HTTP 请 求 方式 : POST/GET。 

请 求 参数 ， 如 表 A-9 所 示 。 











表 A-9_ 根 据 用 户 昵称 查找 用 户 的 请 求 参 数 
参数 名 称 说 明 
pick name 昵称 ， 必 给 


响应 参数 ， 如 表 A-10 所 示 。 
表 A-10 根据 用 户 昵称 查找 用 户 的 响应 参数 


参数 名 称 


0: 插入 失败 
1: 插入 成 功 


code Number 





A.6 用户 登 录 


接口 说 明 : 根据 用 户 名 和 密码 验证 用 户 登 录 。 
URL: http://localhost:8080/rrwb/crud/user/login。 
HTTP 请 求 方式 : POST/GET。 

请 求 参数 : 如 表 A-11 所 示 。 


表 A-11 用户 登录 的 请 求 参数 
参数 名 称 类 型 说 ”了 明 





登录 名 ， 必 和 输 





密码 ， 必 和 输 
响应 参数 : 如 表 A-12 所 示 。 


表 A-12 用 户 登录 的 响应 参数 








参数 名 称 说 明 
oe 0: 插入 失败 
1: 插入 成 功 
data 查询 到 的 数据 的 数组 
IOWS 


查询 到 的 记录 总 数量 
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A.7 根据 用 户 昵称 模糊 查找 用 户 


接口 说 明 : 根据 用 户 昵 称 模糊 查找 用 户 ， 并 可 以 分 页 查询 。 
URL: http://localhost:8080/rrwb/crud/user/findUserLikeNickName.。 
HTTP 请 求 方式 : POST/GET。 

请 求 参数 ， 如 表 A-13 所 示 。 


表 A-13_ 根 据 用 户 昵称 模糊 查找 用 户 的 请 求 参 数 











参数 名 称 说 了 明 
nick name 昵称 ， 必 输 
id 用 户 ID， 必 输 
page 当前 页 数 ， 从 1 开始 
size 每 页 显示 的 数量 





响应 参数 : 如 表 A-14 所 示 。 


表 A-14_ 根据 用 户 昵称 模糊 查找 用 户 的 响应 参数 





参数 名 称 说 ”了 明 
0: 插入 失败 
iis 1: 插入 成 功 
pages 查询 到 的 总 页 数 
data 查询 到 的 数据 的 数组 
IOWS 查询 到 的 记录 总 数量 
例如 : 


{"code":1,"pages":1,"data":[{"” id":103; "login name"”:"1@1.com"”, "gender":"f 
emale", "nick name":"hello", "pwd":"111111", "status":true, "timestamp":142708826 
3009}, {"_id":92,"login name":"wyy@163.com", "gender":"female", "nick name":"wuy 
uan", "pwd":"111111", "status":true, "timestamp":1426058627885}, {"_id":91,"login 
_name":"zp@163.com", "gender":"female", "nick name":"zhangsan", "pwd":"111111"," 
status":true, "timestamp":1426058555856}], "rows":3} 


A.8 上 传 头像 缩 略 图 


接口 说 明 : 上 传 头像 缩 略图 。 

URL: http://localhost:8080/rrwb/crud/uploadServlet。 
HTTP 请 求 方式 : POST/GET。 

enctype: multipart/form-data。 

请 求 参数 : 如 表 A-15 所 示 。 
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表 A-15 上 传 头像 缩 略图 的 请 求 参数 





参数 名 称 说 明 
1 
最 初 选择 区 域 的 左上 角 坐 标 
x2 
最 初 选择 区 域 的 右上 角 举 标 
yz 





上 传 图 片 的 form 表单 中 ，enctype 属性 设置 为 "multipart/form-data"， 以 二 进 制 格 式 上 传 
图 片 。 


响应 参数 ， 如 表 A-16 所 示 。 


表 A-16 上 传 头像 缩 略 图 的 响应 参数 
参数 名 称 
0: 插入 失败 
1: 插入 成 功 


ul 返回 的 头像 纳 咯 图 的 ul 地 址 
A.9 上 传 图 片 微 博 


code String 





接口 说 明 : 上 传 微 博 图 片 。 

URL: http://localhost:8080/rrwb/crud/ upload WeiboServlet。 
HTTP 请 求 方式 : POST/GET。 

enctype: multipart/form-data。 

请 数 : 天 > 

响应 参数 ， 如 表 A-17 所 示 。 





表 A-17 上 传 图 片 微 博 的 响应 参数 





参数 名 称 说 上 明 
0: 插入 失败 
、 1: 插入 成 功 
ul 返回 图 片 的 ul 地 址 


A.10 发 布 微 博 


接口 说 明 : 发 布 微 博 。 
URL: http://localhost:8080/rrwb/crud/weibo/add。 
HTTP 请 求 方式 : POST/GET。 
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请 求 参数 :如 表 A-18 所 示 。 


表 A-18 发 布 微 博 的 请 求 参数 





























参数 名 称 类 型 说 ”了 明 
user_id | Number | 户 ID， 必 输 
user nickName | String | 
user head img String 
img String 
content String 必 输 


响应 参数 ， 如 表 A-19 所 示 。 


表 A-19 发布 微 博 的 响应 参数 
参数 名 称 类 型 说 ”了 明 
0: 插入 失败 
1: 插入 成 功 


A.11 查询 较 早 发 布 的 微 博 





code Number 


接口 说 明 : 查询 较 早 发 布 的 微 博 。 

URL: http://localhost:8080/rrwb/crud/weibo/previous_weibos。 
HTTP 请 求 方式 : POST/GET。 

请 求 参 数 ， 如 表 A-20 所 示 。 





表 A-20 ”查询 较 早 发 布 的 微 博 的 请 求 参数 











参数 名 称 说 了 明 
user id 用 户 ID， 必 输 
page 当前 页 数 ， 从 1 开始 
Size String 每 页 显示 的 数量 


指定 从 哪个 时 间 节 点 向 后 查询 微 博 


响应 参数 ， 如 表 A-21 所 示 。 


last More_Time 


表 A-21 查询 较 早 发 布 的 微 博 的 响应 参数 











参数 名 称 类 型 说 了 明 
0: 插入 失败 
code Strng 
1: 插入 成 功 
pages | Number | 查询 到 的 总 页 数 
data | Array | 查询 到 的 数据 的 数组 





Rows Strin 查询 到 的 记录 总 数量 
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A.12 查询 尚未 加 载 的 最 新 发 布 的 微 博 


接口 说 明 : 查询 尚未 加 载 的 最 新 发 布 的 微 博 。 

URL: http://localhost:8080/rrwb/crud/weibo/latest_ weibos。 
HTTP 请 求 方式 : POST/GET。 

请 求 参数 : 如 表 A-22 所 示 。 


表 A-22 查询 尚未 加 载 的 最 新 发 布 的 微 博 的 请 求 参数 











参数 名 称 说 了 明 
user id 用 户 ID， 必 输 
page 当前 页 数 ， 从 1 开始 
size 每 页 显示 的 数量 
cuTentTime 





上 次 加 载 最 新 微 博 的 时 间 
响应 参数 ， 如 表 A-23 所 示 。 


表 A-23 查询 尚未 加 载 的 最 新 发 布 的 微 博 的 响应 参数 
参数 名 称 


说 了 明 
0: 插入 失败 
code 
1: 插入 成 功 
ages 查询 到 的 总 页 数 
data 查询 到 的 数据 的 数组 
TOWS 





接口 说 明 ， 关注 功能 。 

URL: http://localhost:8080/rrwb/crud/fans/add。 
HTTP 请 求 方式 : POST/GET。 

请 求 参数 : 如 表 A-24 所 示 。 


表 A-24 ”增加 关注 的 请 求 参数 








参数 名 称 类 型 说 了 明 
fans_id Number 当前 用 户 卫 
followed id Number 被 关注 用 户 DD 





响应 参数 : 如 表 A-25 所 示 。 


附录 A ”服务 端 接口 "303。 








表 A-25_ 增 加 关注 的 响应 参数 


参数 名 称 





A.14 查看 当前 用 户 是 否 已 经 关注 某 个 用 户 


接口 说 明 : 查看 当前 用 户 是 否 已 经 关注 某 个 用 户 , 返回 结果 是 一 个 对 象 , 如 果 对 象 的 rows 
不 等 于 0， 则 当前 用 户 已 经 关注 过 某 个 用 户 。 

URL: http://localhost:8080/rrwb/crud/fans/find。 

HTTP 请 求 方式 : POST/GET。 

请 求 参 数 ， 如 表 A-26 所 示 。 


表 A-26 查看 当前 用 户 是 否 已 经 关注 某 个 用 户 的 请 求 参数 














参数 名 称 类 型 明 
fans id 
followed_id Number 

响应 参数 : 如 表 A-27 所 示 。 
表 A-27 查看 当前 用 户 是 否 已 经 关注 某 个 用 户 的 响应 参数 
参数 名 称 说 了 明 
0: 插入 失败 

Cp 1: 插入 成 功 
pages 查询 到 的 总 页 数 
data | Amay | 查询 到 的 数据 的 数组 
IOWS String 查询 到 的 记录 总 数量 





A.15 分 页 查找 当前 用 户 的 粉丝 


接口 说 明 : 分 页 查找 当前 用 户 的 粉丝 。 

URL: http://localhost:8080/rrwb/crud/fans/fanspage。 
HTTP 请 求 方式 : POST/GET。 

请 求 参数 ， 如 表 A-28 所 示 。 


表 A-28 分 页 查找 当前 用 户 的 粉丝 的 请 求 参 数 
参数 名 称 类 型 
followed_ id Number 


说 了 明 
当前 用 户 也 








page String 当前 页 数 ， 从 1 开始 
size Strin: 每 页 显示 的 数量 
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响应 参数 :如 表 A-29 所 示 。 


表 A-29_ 分 页 查找 当前 用 户 的 粉丝 的 响应 参数 














参数 名 称 类 型 说 了 明 
code String We 
1: 插入 成 功 
pages | Number | 查询 到 的 总 页 数 
data | aray | “查询 到 的 数据 
IOWS String 查询 到 的 记录 总 数量 





例如 : 


{"code":1,"pages":1,"data": [{" id":16,"1ogin name":"1387654321","nick nam 
e":"11", "pwd":"111111", "status":true, "timestamp":1419917453214, "birthday":"20 
14-12-19","qq":"","provinceValue":"7", "cityName":"", "msn":"msss","real name": 
"aa", "provinceName" : "吉林 省 ", "blog":"c", "cityValue":"","img":" 
3.jpg", "other email":"","age":50}],"rows":1} 





A.16 分 页 查找 当前 用 户 关注 的 用 户 


接口 说 明 : 分 页 查找 当前 用 户 关注 的 用 户 。 

URL: http://localhost:8080/rrwb/crud/fans/followspage。 
HTTP 请 求 方式 : POST/GET。 

请 求 参 数 ， 如 表 A-30 所 示 。 


表 A-30_ 分 页 查找 当前 用 户 关注 的 用 户 的 请 求 参数 
参数 名 称 说 明 



















fans id Number 当前 用 户 了 D 
page String 当前 页 数 ， 从 1 开始 
每 页 显示 的 数量 





响应 参数 : 如 表 A-31 所 示 。 


表 A-31 分 页 查找 当前 用 户 关注 的 用 户 的 响应 参数 














参数 名 称 类 型 说 了 明 
code String 人 
1: 插入 成 功 
pages | Number | 查询 到 的 总 页 数 












Strng 


查询 到 的 数据 的 数组 
查询 到 的 记录 总 数量 









